css 在 li、ul 和 ol 中的继承.需要解释或参考

我正在起草一个关于HTML和CSS嵌套列表中的样式如何工作的快速测试。我试图展示子选择器与一般十进制选择器(不知道这是否是正确的术语)ul li 与 ul> li 的不同工作方式。

但是当我在 ul> li 上涂上红色时，那么只有 ul 中的子 li 应该得到红色文本，但事实证明 ul 中的所有文本都继承了该颜色。有人可以这么好心地向我解释为什么只有文本属性会发生这种情况，例如颜色、文本对齐和文本装饰。虽然背景颜色和边框等属性不会传递给孙子孙女(因为它应该正确地与>选择器一起使用)。或者只是给我发一个链接，指向解释这一点的地方！

提前感谢！

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>

属性在具有值inherit时继承。

浏览器提供的默认样式表具有inherit属性的默认值，通常认为它很有用。

鉴于以下情况很有用：

<p style="color: blue">The quick <em>brown</em> fox jumped over the lazy dog.</p>

。em元素继承颜色，而不是强制您重新指定它。

继承背景是没有用的，因为这会覆盖在前一个背景的顶部。背景图像将在em元素上重新开始，而半透明的背景颜色将增加其父元素的不透明度。

让我们将您的问题分为两部分，

ul > li到底是什么意思？

对于 CSScolor属性，它不仅仅意味着ul的第一个子元素，它还意味着子元素中的一些元素及其属性，除非您为它们设置不同的color，例如

<style>
ul > li {
color: red;
}
</style>
<ul>
<li>HOME</li>
<li> MY ROOMS
<ul>
<li>BED ROOM</li>
<li>KITCHEN</li>
</ul>
</li>
<li>GARDEN</li>
</ul>

该color: red;不仅适用于ul > li，也适用于ul > li > ul > li。现在，如果您为它们设置不同的颜色，那么它们将不再继承ul > li的color，请参阅下面的示例-

<style>
ul > li {
color: red;
}
ul > li li {
color: green;
border-width: 1px;
border-style: solid;
}
</style>
<ul>
<li>HOME</li>
<li> MY ROOMS
<ul>
<li>BED ROOM</li>
<li>KITCHEN</li>
</ul>
</li>
<li>GARDEN</li>
</ul>

如您所见，子列表项的颜色现在不同了。您还可以看到它们周围的border和颜色，这是您问题的第二部分-

CSScolor属性是否仅适用于文本？

答案是否定的，如果将 CSScolor属性应用于元素，则意味着它也应用于该元素的以下子元素的以下属性-

alt属性(img标签，该元素的子级)的值的文本颜色
ul、ol&li的border-color(它们是该元素的子元素)
li的list-style-type颜色(它是该元素的子元素)

现在，请参阅以下示例-

<style>
div {
width: 400px;
margin: 20px auto;
/* color */
color: green
}
ol li,
ul {
border-width: 1px;
border-style: solid;
}
</style>
<div>
<img src="01.jpg" alt="This is a missing img tag">
<br>
<br>
<ul>
<li>Lorem, ipsum dolor.</li>
</ul>
<br>
<ol>
<li>Lorem ipsum dolor sit.</li>
</ol>
</div>

我从一些我忘记的教程中学到了这一点，但是经过一些谷歌搜索后，我找到了一篇可能对您更有用的文章，这是一个w3school页面，您可以从这里了解有关CSS选择器的更多信息，祝您好运。

相关内容

最新更新

热门标签：