代码优化之css选择器

css有很多选择器，用好了可以极大程度降低代码的臃肿性，来看看有哪些常用的选择器吧

一、基础选择器

*：通配选择器，可以匹配任何元素。

E（element）：标签选择器，就是html自带的标签。

.class：类选择器，匹配所有对应的class。

#id：id选择器，匹配所有对应的id。

二、组合选择器

e,E：多元素选择器，同时匹配e和E元素，这两个元素等级相等。

e F：后代选择器，通常是元素间有包含关系才可以使用，可以选择e元素下所有元素。

e>E：子元素选择器，只能选择紧挨着e元素的子元素。

e+E：兄弟选择器，匹配和e地位相等的兄弟E元素。

三、属性选择器

[attr]：匹配拥有attr属性的标签。

[attr=val]：匹配拥有attr属性，属性值为val的标签。

[attr^=val]：匹配拥有attr属性，属性值以val开头的标签。

[attr$=val]：匹配拥有attr属性，属性值以val结尾的标签。

[attr*=val]：匹配拥有attr属性，属性值包含val的标签。

打开UC浏览器 查看更多精彩图片

四、伪类选择器

a:link 选择所有未被访问的链接。

a:visited 选择所有已被访问的链接。

a:active 选择活动链接。

a:hover 鼠标悬停上方的元素。

a:focus 获取到焦点的元素。

e：first-child：匹配父元素的第一个子元素

e：first-line：向文本的首行设置特殊样式。

e：first-letter：向文本的首字母设置特殊样式。

e：before：在元素的内容前面插入新内容。

e：after：在元素的内容之后插入新内容。

e：checked：设置input控件选中样式。

e：nth-child(n)：匹配父元素的第n个元素。

这些都是用的比较多的，还有很多选择器大家可以具体看文档学习哦。

今天的分享就到这里了，大家看完后学会了吗？ 欢迎评论留言，提供建议和思路，如果觉得文章对您有用就加个关注啦~~