css - 分组应该如何与子选择器和后代选择器正确结合？

Question

子选择器和后代选择器已经泄漏到我的 html 结构上的每个元素，我发现当我将分组与其组合时会发生这种情况。

这会影响整个文档中的所有元素:

ul#topnav > li a, a:hover, a:focus{
 font-size: 14px;
 color: #C2C5CC;
 text-decoration: none;
 padding:0px;
}

虽然这只会影响它应该影响的内容，而将所有元素单独留在指定的选择标准之外:

ul#topnav > li > a{
 font-size: 14px;
 color: #C2C5CC;
 text-decoration: none;
 padding:0px;
}

ul#topnav > li > a:hover{
 font-size: 14px;
 color: #C2C5CC;
 text-decoration: none;
 padding:0px;
}

ul#topnav > li > a:focus{
 font-size: 14px;
 color: #C2C5CC;
 text-decoration: none;
 padding:0px;
}

分组应该如何正确组合？

Answer 1

你们很亲密。 CSS 分组需要重复完整的选择器(ul#topnav > li):

ul#topnav > li > a, 
ul#topnav > li > a:hover,
ul#topnav > li > a:focus{
 font-size: 14px;
 color: #C2C5CC;
 text-decoration: none;
 padding:0px;
}