您现在的位置是：首页 > 网站制作 > 前端设计前端设计

五种你必须彻底了解的CSS选择器

胜于蓝2020-07-21【前端设计】人已围观

简介CSS选择器是进行CSS网页布局的基础，这些选择器合理的应用，将有效的提高你的开发效率和编码水平。我们在大前端有过大量的文章进行介绍，下面的这五种CSS选择器，是基础中的基础，大

CSS选择器是进行CSS网页布局的基础，这些选择器合理的应用，将有效的提高你的开发效率和编码水平。我们在大前端有过大量的文章进行介绍，下面的这五种CSS选择器，是基础中的基础，大家一起温习一下。HvJ胜于蓝|优秀个人博客

一、*（通配符选择器）HvJ胜于蓝|优秀个人博客
*通配符选择器，经常用于css reset，即样式重置，清理标签的默认样式，但现在一般不提倡直接使用*了，主要是*会匹配所有标签，相当耗资源。*在css的优先级中是最低的。HvJ胜于蓝|优秀个人博客

* {HvJ胜于蓝|优秀个人博客
margin: 0;HvJ胜于蓝|优秀个人博客
padding: 0;HvJ胜于蓝|优秀个人博客
}

也可以用*来匹配某一元素下的所有子元素：HvJ胜于蓝|优秀个人博客

#container * {HvJ胜于蓝|优秀个人博客
border: 1px solid black;HvJ胜于蓝|优秀个人博客
}

二、#X （ID选择器）HvJ胜于蓝|优秀个人博客

#+id名，这是日常常用的css选择器，用于匹配id为XXX的元素，id选择器的优势是精准，高优先级（优先级基数为100，远高于class的 10），作为javascript脚本钩子的不二选择，同样缺点也很明显优先级过高，重用性差，所以在使用id选择器前，我们最好问下自己，真的到了非用 id选择器的地步？HvJ胜于蓝|优秀个人博客

#container {HvJ胜于蓝|优秀个人博客
width: 960px;HvJ胜于蓝|优秀个人博客
margin: auto;HvJ胜于蓝|优秀个人博客
}

三、.X （类选择器）HvJ胜于蓝|优秀个人博客

.+class名，标准的样式选择器，与id选择器的区别是样式选择器可以选择多个元素。样式选择器是提倡使用的选择器，我想也是日常前端人员用到最多的选择器了。HvJ胜于蓝|优秀个人博客

.error {HvJ胜于蓝|优秀个人博客
color: red;HvJ胜于蓝|优秀个人博客
}

四、X Y （后代选择器）HvJ胜于蓝|优秀个人博客

li a {HvJ胜于蓝|优秀个人博客
text-decoration: none;HvJ胜于蓝|优秀个人博客
}

目前非常常用的css选择器，用于选取X元素下子元素Y，这里有个要留意的点是，这种方式的选择器将选取其下所有匹配的子元素，无视层级，所以有的情况是不宜使用的，比如上述的代码去掉li下的所有a的下划线，但li里面还有个ul，我不希望ul下的li的a去掉下划线。HvJ胜于蓝|优秀个人博客
使用此子孙选择器的时候要考虑是否希望某样式对所有子孙元素都起作用。HvJ胜于蓝|优秀个人博客
这种子孙选择器还有个作用，就是创建类似命名空间的作用。比如上述代码样式的作用域明显为li。HvJ胜于蓝|优秀个人博客

五、X （标签选择器）HvJ胜于蓝|优秀个人博客