此问题已在此处有答案：
How to prevent CSS color property applied from parent class to child classes（1个答案）
5天前关闭。
在下面的代码中，
添加颜色属性后，ul.veg-list>li未在预期行上工作。它用红色着色所有li元素，而它应该只着色直接子元素li。但是，在同一个声明框中，list-style-type、font-size和padding按预期工作。这里有什么我错过了吗？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 16px;
}
.veg-list {
border: 5px solid darkblue;
width: 30%;
padding: 20px;
margin-left: auto;
margin-right: auto;
margin-top: 2%;
}
ul.veg-list>li {
list-style-type: none;
font-size: 1.2rem;
padding-left: 5%;
color: red;
}
ul.veg-list>li ol li {
margin-left: 6%;
line-height: 200%;
}
</style>
<title>Document</title>
</head>
<body>
<ul class="veg-list">
<li>Green Leafy Vegetables
<ol>
<li>Spinach</li>
<li>Fenugreek</li>
</ol>
</li>
<li>Fruits
<ol>
<li>Magno</li>
<li>Banana</li>
<li>Pineapple</li>
<li>Lichi</li>
</ol>
</li>
<li>Salads
<ol>
<li>Cucumber</li>
<li>Carrot</li>
<li>Raddish</li>
<li>Onion</li>
</ol>
</li>
<li>Herbs
<ol>
<li>Basil</li>
<li>coriender</li>
<li>Turmeric</li>
</ol>
</li>
</ul>
</body>
</html>
2条答案
按热度按时间hgtggwj01#
因为颜色是这样的。当您将红色应用于 p 标记并在其中插入 span 时，span也将是红色的。使用“color”属性，你可以说“这个元素内的文本颜色是 this"，它适用于元素内的所有文本，无论文本是否在具有该颜色的另一个元素中。
如果你只想在第一层 lis中应用颜色，你可以用多一个标签（比如p标签） Package 文本，然后说ul.veg-list>li p {color：red;}，但最好有一些统一类（如果只是关于颜色）或第一个li中的内部文本的特定类（如果该文本有更具体的样式），并避免这种硬嵌套。
另一种方法是在嵌套的 lis中重写颜色，但同样-嵌套..
d4so4syb2#
为了阻止红色被所有子元素占用（颜色是一个继承的属性），如果你不想改变HTML，你可以将所有子元素重置为它们的初始颜色值：