CSS选择器五大基本选择符
中天科技教育2018-09-03 15:11
1. *（通配符）
*通配符选择器，经常用于css reset（样式重置），清理标签的默认样式，但现在一般不提倡直接使用*了，主要是*会匹配所有标签，相当耗资源。*在css的优先级中是最低的。
* {margin: 0; padding: 0;} 也可以用*来匹配某一元素下的所有子元素：#container * {border: 1px solid black;}
2. #X（ID）
#+id名，这是日常常用的css选择器，用于匹配id为XXX的元素，id选择器的优势是精准，高优先级（优先级基数为100，远高于class的10），作为javascript脚本钩子的不二选择，同样缺点也很明显：优先级过高，重用性差，所以在使用id选择器前，我们最好问下自己，真的到了非用id选择器的地步？
#container { width: 960px; margin: auto;}
3. .X（类）
.+class名，标准的样式选择器，与id选择器的区别是样式选择器可以选择多个元素。样式选择器是提倡使用的选择器，也是日常前端人员用到最多的选择器了。
.error {color: red;}
4. X Y（后代）
li a {text-decoration: none;}
目前非常常用的css选择器，用于选取X元素下子元素Y，这里有个要留意的点是，这种方式的选择器将选取其下所有匹配的子元素，无视层级，所以有的情况是不宜使用的，比如上述的代码去掉li下的所有a的下划线，但li里面还有个ul，我不希望ul下的li的a去掉下划线。使用此子孙选择器的时候要考虑是否希望某样式对所有子孙元素都起作用。这种子孙选择器还有个作用，就是创建类似命名空间的作用。比如上述代码样式的作用域明显为li。
5. X（标签）
a { color: red; }
ul { margin-left: 0; } 标签选择器，优先级仅仅比*高，常用于css reset（样式重置）。
举报/反馈
0
0
收藏
分享
