如何将css规则正确应用于嵌套元素

Question

我现在开始使用CSS，但我仍然对带有嵌套元素的box模型感到困惑，直接使用li元素或ul元素将对齐方式应用到列表左侧是正确的

ul {
background-color: red;
/*margin-left: -28px*/
}
li {
margin-left: -28px;
background-color: green;
}
ul + ul {
background-color: red;
margin-left: -28px;
}
ul + ul li {
margin-left: initial;
background-color: green;
}

<ul>
<li>apple</li>
<li>banana</li>
</ul>
<ul>
<li>apple</li>
<li>banana</li>
</ul>

如果我将属性应用于ul或li，会有什么区别？

Answer 1

CSS通过将样式属性应用于选择器来工作。在您的情况下，选择器是ul或li元素。把ul想象成一个盒子，把li元素想象成ul盒子里的盒子。如果对ul元素进行样式设置，则只有可以继承的属性才会渗透到子元素中，在本例中是li元素。下面是一个糟糕的CSS类列表，请参阅；inherit"；柱

为了回答您的问题，text-align属性是继承的，因此如果将其应用于ul，则所有子元素都将继承该属性。这将是最好的方法，因为您只需要在父容器上指定一次属性。

除此之外，听起来您正试图删除无序列表左侧的间距。这就是这样做的，还有一个解释：

• 'ul'元素默认情况下还有一个填充，但如果删除填充，项目符号就会溢出容器
• 因此，我们需要删除填充，并将list-style属性设置为inside

body {
background: #fefefe;
padding: 30px;
}
ul {
background: #efefef;
padding: 0;
list-style: inside;
}

<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>