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

【问题标题】：Two CSS declarations with same specificity have a strange behaviour具有相同特性的两个 CSS 声明有一个奇怪的行为
【发布时间】：2021-12-10 09:12:23
【问题描述】：

我有这两个 CSS 声明。两者具有相同的特异性 - 我什至检查了特异性计算器以确保它们相等。在这种情况下，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>

【问题讨论】：

标签： html css css-specificity

【解决方案1】：

解决办法

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

问题是您将样式应用于

元素不正确，因为

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

【讨论】：

【解决方案2】：

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

【讨论】：

关于::first-line css-tricks.com/almanac/selectors/f/first-line的博客