具有相同特异性的两个 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>

它不起作用的主要原因是因为您选择了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>

这里是解决方案

<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>

问题是您将样式应用于

元素是不正确的，因为

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

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