后代组合子CSS定义的顺序[复制]

Question

这个问题已经在这里有一个答案：

• Understanding CSS selector priority / specificity 4个回答

这必须是HTML忍者一个很简单的问题在那里，但我觉得我缺少明显的东西在这里。这里是一个片段：

#red span {
  color: red;
}

#green span {
  color: green;
}

<div id="red">
  <p><span>red</span></p>
  <div id="green">
    <p><span>green</span></p>
  </div>
</div>

如果我换了样式表的顺序，所有的文字变成红色：

#green span {
  color: green;
}

#red span {
  color: red;
}

<div id="red">
  <p><span>red</span></p>
  <div id="green">
    <p><span>green</span></p>
  </div>
</div>

这种情况尽管<div id="green">是<span>green</span>比DOM树<div id="red">的更靠内的家长。我想是因为它的CSS现在首先出现在样式表的顺序并不占先简单。所以样式表的顺序是这里最重要的。

这是预期的行为？这是实现/特定浏览器？有一些官方的规格细节是什么？

最后，没有任何CSS选择器语法，我可以使用，使其作为第一个片段工作，而不依赖样式表的顺序或添加新类的名称，编号等？

Answer 1

是的，你得到的结果是绝对预期 - 好吧，也许没有预期，但它们是正确的。下面是official specs。而这里的一个tweet poll of mine详细介绍了完全相同的问题。 （剧透：大多数选民听错了）阅读的答复进行了较深入的讨论。

目前，有没有任何CSS技术，以“最接近父”的范围考虑。这是一个普遍的误解很多程序员都有。 （CSS是不是一种编程语言）。一个典型的程序员会想：“该选择#red span意味着，无论我看到一个#red，寻找里面span，然后应用的样式。由于#green span是#red内，绿色的颜色会由红色后​​适用。”这简直是不正确。

实际上CSS样式应用的方式是，它看起来在每个元素，然后通过样式表去从上到下，如果匹配决定，然后应用/覆盖风格，因为它去。这是级联的只是一个方面，等等（such as inheritance and specificity）。因为在你的第二个例子#red span在CSS源来自最后，它被应用于最后，覆盖#green span，无论span“如何接近”是DOM中#red内。

要解决您的具体问题，最容易做的事情是使用直接子选择器，像#red > p > span和#green > p > span。但正如你会怀疑，这些选择将不得不如果你更改HTML进行更新。耦合您CSS和HTML是一件麻烦事，尤其是当你的项目的发展。

最好的策略是不依赖于DOM风格你的元素。当您移动span的#red外会发生什么？你会希望它保持它的风格？对于维护和可扩展的CSS，你应该只（未标识）使用类和类适用于你想要的风格实际元素，而不依赖于DOM结构或父子关系。这样，当你的HTML结构发生变化，你不必调整你的CSS相匹配。

例：

.red {
  color: red;
}
.green {
  color: green;
}

<div>
  <p><span class="red">red</span></p>
  <div>
    <p><span class="green">green</span></p>
  </div>
</div>

Answer 2

您可以使用>选择，使之适用于只有特定的跨度你给该ID的DIV中，而不是所有的跨度内的div

#green > span {
  color: green;
}

 span {
  color: red;
}

<div id="red">
  <p><span>red</span></p>
  <div id="green">
    <span>green</span>
  </div>
</div>

Answer 3

如果你想这样做是为了所有后代，你可以像下面通过的Javascript实现它，如果你想申请多种颜色则减码的多线，但会比CSS时间慢。这取决于你的喜好

var colors = ['red', 'green', 'blue', 'orange', 'brown']
var spans = document.querySelectorAll('span');

spans.forEach(function(spanElement) {
  colors.forEach(function(color){
   if(spanElement.closest(`#${color}`)){
     spanElement.style.color=color
   }      
  }) 
})

<div id="red">
  <span>red</span>
  <div id="green">
    <span>green</span>
    <p><span>green</span></p>
  </div>
  <div id="blue">
    <span>blue</span>   
  </div>
  <div id="orange">
    <span>orange</span>   
  </div>
  <div id="brown">
    <span>brown</span>   
  </div>
</div>