CSS 规则未按预期应用

Posted 2023-05-09

【中文标题】CSS 规则未按预期应用

【英文标题】：CSS rule not applied as expected

【发布时间】：2018-10-24 22:15:13

【问题描述】：

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

我的 jQuery 代码添加了“水平”类。注意选择器只指向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>

前 3 个属性（margin、float、list-style）按预期应用于三个子“li”标签，但最后一个属性（即颜色）应用于父元素中的所有元素（后代）。为什么会这样？

【参考方案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>

【讨论】：

@SamiKh 如果有帮助，请不要忘记接受答案。这也适用于您之前的所有问题，因为我注意到您尚未接受任何问题的答案。

【参考方案2】：

继承的属性

FROM MDN

当没有为元素指定继承属性的值时，该元素将获取其父元素上该属性的计算值。只有文档的根元素才能获得属性摘要中给出的初始值。继承属性的典型示例是颜色属性。

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

【参考方案3】：

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

.horizontal li  color: initial;