Html CSS将属性设置为元素，但不设置为子体

在纯CSS中有没有一种方法可以改变一个项目的颜色而不是它的后代

假设我有一个分类树：

<ul class="my-list sub-has-contents">
  <li>No content in this branch
    <ul>
      <li>Empty leaf node</li>
    </ul>
  </li>
  <li>No content in this one either</li>
  <li class="sub-has-contents">There is content in this branch (3 items)
    <ul>
      <li class="has-contents">There is some content is this leaf node (1 item)</li>
      <li class="has-contents">More content here (2 items)</li>
      <li>Lorem ipsum</li>
    </ul>
  </li>
</ul>

我可以看到内容为蓝色的节点和粗体的叶子节点。问题是有些节点没有任何内容，但它们继承了父“li”的颜色

---

如何设置节点的样式而不影响子体？

您需要记住放置css的顺序，就像在画布上绘制一样，您需要先绘制背景色，然后添加前景色。在本例中，您的基础颜色为绿色，因此将.sub的所有li都设置为绿色，然后将您的特定li设置为蓝色：

---

您需要记住放置css的顺序，就像在画布上绘制一样，您需要先绘制背景色，然后添加前景色。在本例中，您的基础颜色为绿色，因此将.sub的所有li都设置为绿色，然后将您的特定li设置为蓝色：

---

如果您可以确保带有内容的项目被标记为包含

内容的某个类，那么没有内容的项目就没有类。您可以尝试以下方法：


。包含内容{
字体大小：粗体；
颜色：蓝色；
}
.sub有内容{
颜色：蓝色；
}
.我的列表：不是（[class*=“contents”]）{
颜色：红色；
}

此分支中没有内容

空叶节点


这个也没有内容
该分支机构中有内容（3项）

此叶节点上有一些内容（1项）
此处有更多内容（2项）
同侧眼睑


如果您可以确保带有内容的项目被标记为包含
内容的某个类别，而没有内容的项目则没有类别。您可以尝试以下方法：


。包含内容{
字体大小：粗体；
颜色：蓝色；
}
.sub有内容{
颜色：蓝色；
}
.我的列表：不是（[class*=“contents”]）{
颜色：红色；
}

此分支中没有内容

空叶节点


这个也没有内容
该分支机构中有内容（3项）

此叶节点上有一些内容（1项）
此处有更多内容（2项）
同侧眼睑


您可以对所有子元素应用选择器，以否定其他样式


.sub包含内容*{
颜色：红色；
}
.有内容{
字体大小：粗体；
颜色：蓝色；
}
.sub有内容{
颜色：蓝色；
}

此分支中没有内容

空叶节点


这个也没有内容
该分支机构中有内容（3项）

此叶节点上有一些内容（1项）
此处有更多内容（2项）
同侧眼睑


您可以对所有子元素应用选择器，以否定其他样式


.sub包含内容*{
颜色：红色；
}
.有内容{
字体大小：粗体；
颜色：蓝色；
}
.sub有内容{
颜色：蓝色；
}

此分支中没有内容

空叶节点


这个也没有内容
该分支机构中有内容（3项）

此叶节点上有一些内容（1项）
此处有更多内容（2项）
同侧眼睑


否，您不能设置属性以使其免于继承，当然，除非问题不是根据定义继承的

如果在元素上设置了例如
color
，则该元素的所有子元素都将继承该值，除非它们自己在其上设置了
color
。这是CSS级联思想的一部分。你无法阻止它；你可以适应它

因此，您需要将属性设置为不应继承它的子体。需要将其设置为特定值；无法跳过继承中的级别（例如，使元素从其祖辈继承，而不是从其父代继承）。
否，您不能设置属性使其免于继承，当然，除非问题不是通过定义继承的

如果在元素上设置了例如
color
，则该元素的所有子元素都将继承该值，除非它们自己在其上设置了
color
。这是CSS级联思想的一部分。你无法阻止它；你可以适应它

因此，您需要将属性设置为不应继承它的子体。需要将其设置为特定值；无法跳过继承中的级别（例如，使元素从其祖辈继承而不是从其父代继承）。
这是可行的，但我想被动地实现这一点。问题是我并不想为空元素指定颜色，我只想让它们继承自主体。这是可行的，但我想被动地实现这一点。问题是，我并不想为空元素指定颜色，我只想让它们继承自主体。对潜在读者来说：这似乎是正确的答案，所以我接受它，但Scimonester和Indubitable的解决方案是
.has-contents {
  font-weight: bold;
  color: blue;
}
.sub-has-contents {
  color: blue;
}

.sub-has-contents li {
    color:green;
}
.sub-has-contents .has-contents {
    font-weight: bold;
    color: blue;
}
.sub-has-contents{
    color: blue;
}