CSS规则异常：为直接子元素加类后color为何继承至所有后代？

这是个很典型的CSS继承特性问题，我来给你拆解清楚核心原因：

1. 先明确两个关键CSS概念 #

• 非继承属性：这类样式只会应用到直接选中的元素，后代元素不会自动“继承”它们，除非你显式为后代设置相同样式。
• 继承属性：这类样式会自动传递给所有后代元素，除非后代有自己的样式覆盖掉这个值。

2. 你的代码里的属性差异 #

不会继承的属性：margin、float、list-style #

你设置的margin:10px、float:left、list-style:none都属于非继承属性，所以它们只会作用于你选中的#selected-plays > li这三个直接子<li>元素，不会影响它们内部的子列表、子<li>等后代元素——这也是你看到前三个属性“如预期生效”的原因。

会继承的属性：color #

而color是典型的继承属性：当你给父元素（这里是顶级<li>）设置color:red后，它的所有后代元素（包括子<li>、<a>标签，只要这些后代没有自己的color样式）都会自动继承这个红色值，所以看起来整个#selected-plays下的所有文本都变成红色了。

3. 如何让color只作用于直接子<li>？ #

如果你只想让顶级<li>的文本变红，不影响后代元素，可以试试这两种方法：

方法一：用包裹元素限定范围 #

把顶级<li>里的文本单独用<span>包裹，然后只给这个<span>设置颜色：

<ul id="selected-plays">
 <li><span>Comedies</span> 
 <ul>
 <li><a href="/asyoulikeit/">As You Like It</a></li>
 <!-- 其他子元素不变 -->
 </ul>
 </li>
 <!-- 另外两个顶级<li>同理 -->
</ul>

修改CSS：

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

方法二：重置后代元素的颜色 #

给后代元素设置默认颜色，覆盖继承来的红色：

.horizontal { margin: 10px; float: left; list-style: none; color: red; }
/* 重置子列表的颜色为默认值 */
.horizontal ul { color: initial; }
/* 如果<a>标签也需要重置，可以加上 */
.horizontal a { color: blue; }

内容的提问来源于stack exchange，提问作者Sami Kh