Question

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

有一些分支和叶子节点有相关内容。

这是一个小提琴：

http://jsfiddle.net/mvm542e5/

如您所见，将样式设置为：

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

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

如何设置节点的样式，但只留下后代？

Answer 1

如果您可以确保带有内容的项目标记了某个包含contents的类，而没有内容的项目则没有分类。你可以试试这个：

＆＃13;

.has-contents {
  font-weight: bold;
  color: blue;
}
.sub-has-contents {
  color: blue;
}
.my-list :not([class*="contents"]) {
  color:red;
}

＆＃13;

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

＆＃13;

Answer 2

您要记住放置CSS的顺序，就像在画布上绘画一样，您想先绘制背景颜色，然后添加前景色。在这种情况下，您的基色为绿色，因此将.sub-has-contents的所有内容设为绿色，然后将特定的颜色设为蓝色：

http://jsfiddle.net/mvm542e5/4/

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

Answer 3

您可以将选择器应用于所有后代元素以否定其他样式。

.sub-has-contents * {
  color:red;
}
.has-contents {
  font-weight: bold;
  color: blue;
}
.sub-has-contents {
  color: blue;
}

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

Answer 4

不，您不能设置属性以使其免于继承，当然除非定义不继承问题。

如果您设置例如color对一个元素，然后该值将由该元素的所有子元素继承，除非它们自己设置了color。这是CSS级联的概念的一部分。你不能阻止它;你可以适应它。

因此，您需要将属性设置为不应继承它的后代。它需要设置为特定值;没有办法跳过继承中的级别（例如，使一个元素从其祖父母继承，而不是从其父级继承）。

CSS将属性设置为元素，但不设置为后代

4 个答案: