css中上下文选择器 |css技巧 百度ued

ul li{
color:red;
}

上述代码会选择一个无序列表中的所有列表项，并将这些列表项的字体颜色设置成红色。这种选择方式非常简单易懂，但是也有其不足之处。例如，当大家的HTML骨架内存在其他无序列表，也需要用上述样式时，大家就需要添加额外的CSS选择器来进行设定。

.nav ul li{
color:red;
}

这个代码将只针对位于.nav类标签下的无序列表列表项进行样式设定。通过这种方式，大家在页面中就可以同时存在两个或以上类似的无序列表，但是只有其中一个符合.nav类标签下的嵌套，这样就可以让多个相同但在不同位置的元素选择器同时存在于HTML中。

总之，使用CSS的上下文选择器可以帮助大家准确地定位HTML文档内的元素，并将它们与样式相关联。只要理清它们的使用规则和优点，大家便可以轻松编写出适用于各种HTML文档的CSS样式，提高CSS设置效率，减少代码冗余。