为什么CSS中的输出存在差异：li a VS li，a

Question

为什么CSS中的输出存在差异： li a ：https://www.w3schools.com/code/tryit.asp?filename=FM0HPU6L0R35运行»VS li，a ：https://www.w3schools.com/code/tryit.asp?filename=FM0HQKZG79HR

Answer 1

嗯，这只是因为在第一种情况下，风格适用于所有＆＃34; a＆＃34;在li元素中找到的标签。

li a {
       display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

在第二种情况下，风格适用于所有＆＃34; li＆＃34;元素以及所有＆＃34; a＆＃34;元素：

li,a {
       display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
} 

简单地说，在第二种情况下，你得到填充的两倍：来自li + 16px的16px来自a。

以下是css选择器上的一些您可能会觉得有用的链接：

  

https://www.sitepoint.com/css-selectors/   https://www.w3schools.com/css/css_attribute_selectors.asp

希望这有帮助！

Answer 2

添加到@Florinache

我们可以将所有这些样式组合成一个规则属性，而不是编写两个单独的CSS选择器，只需用下面的逗号分隔各个选择器：

li,a {
       display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}  

在您的链接中使用以下代码替换列表，您将看到差异。

<ul>
  <li>Home</li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>