CSS规则未按预期应用

Question

我有以下代码。id为“selected-plays”的第一个ul标签有3个子“li”标签（而不是后代）。我试图对这些子标签应用一些CSS规则。

我的jQuery代码添加了class“horizontal”。请注意，选择器只指向具有id #selected-plays的父元素的子元素。

$(document).ready(function() {
  $('#selected-plays > li').addClass('horizontal');
});

.horizontal {
  margin: 10px;
  float: left;
  list-style: none;
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<ul id="selected-plays">
  <li>Comedies
    <ul>
      <li><a href="/asyoulikeit/">As You Like It</a></li>
      <li>All's Well That Ends Well</li>
      <li>A Midsummer Night's Dream</li>
      <li>Twelfth Night</li>
    </ul>
  </li>
  <li>Tragedies
    <ul>
      <li><a href="hamlet.pdf">Hamlet</a></li>
      <li>Macbeth</li>
      <li>Romeo and Juliet</li>
    </ul>
  </li>
  <li>Histories
    <ul>
      <li>Henry IV (<a href="mailto:[e-mail]">email</a>)
        <ul>
          <li>Part I</li>
          <li>Part II</li>
          www.it-ebooks.info Chapter 2 [ 29 ]
        </ul>
        <li><a href="http://www.shakespeare.co.uk/henryv.htm">
     Henry V</a></li>
        <li>Richard II</li>
    </ul>
  </li>
</ul>

首先三个属性（margin、float、list-style）按预期应用于三个子元素 'li' 标签，但最后一个属性即颜色被应用于父元素内的所有元素（后代）。为什么会发生这种情况？

- Sami Kh

Answer 1

这是预期的行为，因为子元素将自动继承其父元素的color设置。如果您不想要这种行为，可以在CSS中设置子元素的颜色：

#selected-plays li li {
  color: initial;
}

$(document).ready(function() {
  $('#selected-plays > li').addClass('horizontal');
});

.horizontal {
  margin: 10px;
  float: left;
  list-style: none;
  color: red;
}

#selected-plays li li {
  color: initial;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<ul id="selected-plays">
  <li>Comedies
    <ul>
      <li><a href="/asyoulikeit/">As You Like It</a></li>
      <li>All's Well That Ends Well</li>
      <li>A Midsummer Night's Dream</li>
      <li>Twelfth Night</li>
    </ul>
  </li>
  <li>Tragedies
    <ul>
      <li><a href="hamlet.pdf">Hamlet</a></li>
      <li>Macbeth</li>
      <li>Romeo and Juliet</li>
    </ul>
  </li>
  <li>Histories
    <ul>
      <li>Henry IV (<a href="mailto:[e-mail]">email</a>)
        <ul>
          <li>Part I</li>
          <li>Part II</li>
          www.it-ebooks.info Chapter 2 [ 29 ]
        </ul>
        <li><a href="http://www.shakespeare.co.uk/henryv.htm">
     Henry V</a></li>
        <li>Richard II</li>
    </ul>
  </li>
</ul>

- Rory McCrossan

---

@SamiKh 不要忘记如果有帮助的话接受一个答案。这也适用于您以前的所有问题，因为我注意到您还没有在任何问题上接受答案。 - Rory McCrossan

Answer 2

继承属性

来自MDN

当一个元素没有指定一个继承属性的值时，该元素会从它的父元素获取该属性的计算值。只有文档的根元素会得到该属性摘要中给出的初始值。一个典型的继承属性例子是color属性。

您可以简单地将color:initial样式添加到子元素中以保留样式。选择器可以事先在css中预先指定，也可以通过脚本添加。您可以基于结构拥有不同的选择器，例如li > *, li > li或li li等。

- Nikhil Aggarwal

Answer 3

子标签<li>从具有.horizontal类的父<li>标签继承颜色值。您可以尝试通过添加样式规则来覆盖子标签的颜色，例如：

.horizontal li { color: initial; }

- Gherkin