具有相同特异性的两个 CSS声明具有奇怪的行为

我有这两个 CSS 声明。两者具有相同的特异性-我什至检查了 Specificity Calculator 以确保它们相等。在这种情况下,CSS 中找到的最后一个声明应该应用于元素,因此列表项的颜色应该是绿色的。出于我无法理解的原因,在这种情况下,它们以红色显示。同样令人费解的是,列表子弹以绿色显示。即使我没有“!重要”

我有这两个 CSS 声明。两者具有相同的特异性-我什至检查了 Specificity Calculator 以确保它们相等。在这种情况下,CSS 中找到的最后一个声明应该应用于元素,因此列表项的颜色应该是绿色的。出于我无法理解的原因,在这种情况下,它们以红色显示。同样令人费解的是,列表以绿色显示。即使我没有“!重要”

li:first-line { color: red; } 
ul li { color: green; }
<ul>
  <li>Go Out The House</li>
  <li>Get In Your Car</li>
  <li>Start Driving</li>
</ul>
1

它不起作用的主要原因是因为您选择了li的第一行,每行 1 行,因此它们适用于所有行。如果将第一行切换到ul,它将按预期工作。因此,特异性按预期工作。li中的任何其他行将是绿色的。这就是为什么是绿色的。

ul:first-line { color: red; }
ul li { color: green; }
<ul>
  <li>Go Out The House</li>
  <li>Get In Your Car</li>
  <li>Start Driving</li>
</ul>
0

这里是解决方案

<html>
<head>
<style>
ul::first-line { color: red; } 
ul li { color: green; }
</style>
</head>
<body>
<ul>
  <li>Go Out The House</li>
  <li>Get In Your Car</li>
  <li>Start Driving</li>
</ul>
</body>
</html>

问题是您将样式应用于

元素是不正确的,因为

元素没有第一行,因为它只有一行,因此您应该应用于元素,因为它有多行,因此它有第一行作为它的一部分。希望有帮助。

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(757)
是否可以在安装了Ubuntu的虚拟机中开发cuda程序
上一篇
具有NetworkSolutionsDNS的 Azure自定义域名
下一篇

相关推荐

  • css预编译器: center;}

    CSS预编译器是一种用于构建CSS的工具,它可以将CSS代码转换为更易于管理和维护的格式。它们可以使CSS代码更加灵活,更易于重用,并且可以帮助开发人员更轻松地组织和管理CSS代码。…

    2023-01-05 06:29:43
    0 10 69
  • css 对勾:如何利用CSS实现精美的界面设计

    CSS 对勾是一个用于网页设计的常见图形,它可以用来表示选择、标记或批准。它可以使用 CSS 的 `:before` 和 `:after` 伪元素来创建,以下是一个示例代码:…

    2023-01-28 02:46:22
    0 43 78
  • css 不可点击让你的网页更安全!

    CSS 不可点击的方法有两种:使用 pointer-events 属性:…

    2023-01-22 11:51:22
    0 58 59
  • css 圆形渐变:Welcome

    CSS 圆形渐变是一种圆形的渐变效果,它使用 CSS3 的 `radial-gradient()` 函数来实现。它允许你在圆形中创建渐变,以此来达到你想要的效果。…

    2023-02-05 15:17:57
    0 10 89
  • css页面布局:CSS页面布局实战

    CSS页面布局是使用CSS来控制元素在页面中的位置,大小,形状和外观。它可以帮助我们更好地控制页面的布局,使其更加美观,更易于维护。…

    2023-01-06 04:33:24
    0 27 11
  • css技术:标题

    CSS(Cascading Style Sheets)是一种用于定义HTML文档样式的样式表语言。它可以控制文本格式、字体、颜色、图像位置和布局等。CSS可以在HTML文档中通过内联样式,内部样式表或外部样式表来定义样式。…

    2023-01-02 15:38:58
    0 55 74
  • css黑色:黑色标题

    CSS黑色是一种常用的颜色,可以使用以下代码来定义:…

    2023-01-09 00:36:56
    0 21 40
  • css怎么设置字体颜色:标题

    示例示例CSS设置字体颜色的方法有两种:使用关键字:…

    2022-12-31 04:03:32
    0 71 79

发表评论

登录 后才能评论

评论列表(18条)