我正在起草一个快速测试，测试样式如何在HTML和CSS中的嵌套列表中工作。我试图展示子选择器如何不同于一般的decendant选择器（不知道这是否是正确的术语）ul li，vs ul>；李。
但是当我把颜色红色放在ul>；li，那么只有ul中的子li应该获得红色文本，但结果是ul中的所有文本都继承了该颜色。有没有人能这么好心的解释一下为什么只有文本属性会发生这种情况，比如颜色，文本对齐和文本装饰。而像background-color和border这样的属性不会传递给孙子（因为它应该正确地与>选择器一起工作）。或者只是给我一个链接到某处，这是解释！
提前谢谢！
null
ul {
background-color: red;
}
ul li {
background-color: green;
}
ul>li {
background-color: blue;
color: red;
text-align: center;
}
ul>li>ol {
background-color: pink;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test</title>
<link href="styles.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet" />
</head>
<body>
<div>
<ul>
Unsorted List
<li>
First Items In Unordered List
<ol>
First Ordered List
<li>First Ordered Item</li>
<li>Second Ordered Item</li>
<li>Third Ordered Item</li>
</ol>
</li>
<li>
Second Item In Unordered List
<ol>
Second Ordered List
<li>First Ordered Item</li>
<li>Second Ordered Item</li>
<li>Third Ordered Item</li>
</ol>
</li>
<li>
Third Item In Unordered List
<ol>
Third Ordered List
<li>First Ordered Item</li>
<li>Second Ordered Item</li>
<li>Third Ordered Item</li>
</ol>
</li>
</ul>
</div>
</body>
<script src="script.js"></script>
</html>null
属性的值为inherit时继承。
浏览器提供的默认样式表将inherit作为属性的默认值，在这些属性中它通常被认为是有用的。
有用的是，给定:
<p style="color: blue">The quick <em>brown</em> fox jumped over the lazy dog.</p>
…em元素继承了颜色，而不是强迫你尊重它。
继承一个背景是没有用的，因为它会覆盖在前一个背景的顶部。背景图像将在em元素上重新启动，而半透明的背景颜色将增加其父级的不透明度。
