本文介绍了CSS选择器的基础知识，包括通配符选择器(*)、ID选择器(#)、类选择器(.)、后代选择器以及标签选择器。强调了它们在网页布局中的作用、优缺点和使用场景，特别指出通配符选择器的资源消耗问题以及ID选择器的高优先级特性。同时，讨论了如何合理使用后代选择器避免样式污染。最后提到了标签选择器在CSS重置中的常见应用。
CSS选择器是进行CSS网页布局的基础，这些选择器合理的应用，将有效的提高你的开发效率和编码水平。我们在大前端有过大量的文章进行介绍，下面的这五种CSS选择器，是基础中的基础，大家一起温习一下。
一、*(通配符选择器)
*通配符选择器，经常用于css reset，即样式重置，清理标签的默认样式，但现在一般不提倡直接使用*了，主要是*会匹配所有标签，相当耗资源。*在css的优先级中是最低的。
* {
margin: 0;
padding: 0;
}
也可以用*来匹配某一元素下的所有子元素：
#container * {
border: 1px solid black;
}
二、#X (ID选择器)
#+id名，这是日常常用的css选择器，用于匹配id为XXX的元素，id选择器的优势是精准，高优先级(优先级基数为100，远高于class的 10)，作为javascript脚本钩子的不二选择，同样缺点也很明显优先级过高，重用性差，所以在使用id选择器前，我们最好问下自己，真的到了非用 id选择器的地步？
#container {
width: 960px;
margin: auto;
}
三、.X (类选择器)
.+class名，标准的样式选择器，与id选择器的区别是样式选择器可以选择多个元素。样式选择器是提倡使用的选择器，我想也是日常前端人员用到最多的选择器了。
.error {
color: red;
}
四、X Y (后代选择器)
li a {
text-decoration: none;
}
目前非常常用的css选择器，用于选取X元素下子元素Y，这里有个要留意的点是，这种方式的选择器将选取其下所有匹配的子元素，无视层级，所以有的情况 是不宜使用的，比如上述的代码去掉li下的所有a的下划线，但li里面还有个ul，我不希望ul下的li的a去掉下划线。
使用此子孙选择器的时候要考虑是否希望某样式对所有子孙元素都起作用。
这种子孙选择器还有个作用，就是创建类似命名空间的作用。比如上述代码样式的作用域明显为li。
五、X (标签选择器)
a { color: red; }
ul { margin-left: 0; }
标签选择器，优先级仅仅比*高，常用于css reset。
未完待续，请关注大前端下一篇文章，我们向大家介绍别的CSS选择器
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
