后代组合符CSS定义的顺序[重复]

你可以用 > 选择器,使其仅应用于具有给定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>

是的,你得到的结果完全是意料之中的好吧,也许不是 预期 ,但他们是正确的。这是你的电话号码 official specs . 下面是一个例子 tweet poll of mine

目前,还没有任何CSS技术将最近的父范围考虑在内。这是许多程序员普遍存在的误解。(CSS不是一种编程语言。)一个典型的程序员会想 #red span 意味着无论我在哪里看到 #red ,找一个 span 内部,然后应用样式。自从 #green span 是 在…内 #红色的 ,绿色将在红色之后应用。这是完全错误的。

CSS的方式 事实上 应用样式是指它查看每个元素,然后从上到下遍历样式表,确定是否匹配,然后在执行时应用/覆盖样式。这只是问题的一个方面 大量 ,等等( such as inheritance and specificity ).因为在你的第二个例子中 在CSS源代码中位于最后,最后应用,覆盖 #绿跨 跨度 在范围之内 在DOM中。

要解决您的特定问题,最简单的方法是使用直接子选择器,如 #red > p > span 和 #green > p > span . 但正如您所怀疑的,如果您更改HTML,这些选择器将必须更新。耦合CSS和HTML是一件麻烦事,尤其是随着项目的发展。

这个 最好的 跨度 外面 #红色的 ? 你想让它保持它的风格吗?对于可维护和可伸缩的CSS,您应该只使用类(而不是ID),并将类应用于您想要设置样式的实际元素,而不依赖于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>

如果您想对所有子体执行此操作,可以通过如下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>