css的五种选择器

发布时间:2020-12-12编辑:脚本学堂
本文介绍下,css中常用也是很重要的五种选择器,包括通配符选择器、ID选择器、类选择器、后代选择器、标签选择器,有需要的朋友参考下。

本节内容:
五种常用的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中常用的五种选择器,希望有助于大家掌握css选择器的用法。