资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/CSS选择器

CSS选择器

张金宝 / 2046人阅读

摘要：基本选择器选择器含义版本优先级通用元素选择器匹配任何元素标签元素选择器匹配所有使用标签的元素选择器匹配所有属性中包含的元素选择器匹配所有属性中等于的元素其中中的第一位表示是否是内联的意思是则为不是为多元素的选择器组合选择器含义版本优先级群组

基本选择器
选择器 含义 CSS版本 优先级
* 通用元素选择器,匹配任何元素 2 0,0,0,0
E 标签(元素)选择器,匹配所有使用E标签的元素 1 0,0,0,1
.class1 class选择器,匹配所有class属性中包含class1的元素 1 0,0,1,0
#id1 id选择器,匹配所有id属性中等于id1的元素 1 0,1,0,0

其中,0,1,0,0中的第一位表示是否是内联的意思,是则为1,不是为0

多元素的选择器组合
选择器 含义 CSS版本 优先级
E,F 群组选择器,同时匹配E,F元素,元素之间用,隔开 1 权重相加
E F 后代元素选择器,匹配所有属于E元素后代的F元素,元素之间用空格隔开 1 权重相加
E>F 子元素选择器,匹配所有E元素的子元素F 2 权重相加
E+F 相邻同胞选择器,匹配所有紧随E元素之后的同级F元素 2 权重相加
E~F 同级元素通用选择器,匹配任何在E元素之后的同级F元素 3 权重相加
属性选择器
选择器 含义 CSS版本 优先级
E[attr] 匹配所有具有attr属性的E元素 2 0,0,1,0
E[attr=val] 匹配所有attr属性等于"val"的E元素 2 0,0,1,0
E[attr~=val] 匹配所有attr属性具有多个空格分隔的值,其中一个值等于"val"的E元素 2 0,0,1,0
E[attr¦=val] 匹配所有attr属性具有多个连字号(-)分隔的值,其中一个值以"val"开头的E元素 2 0,0,1,0
E[attr^="val"] 属性attr的值以"val"开头的元素 3 0,0,1,0
E[attr$="val"] 属性attr的值以"val"结尾的元素 3 0,0,1,0
E[attr*="val"] 属性attr的值包含"val"字符串的元素 3 0,0,1,0
伪类选择器
选择器 含义 CSS版本 优先级
E:link 匹配所有未被点击的链接 1 0,0,1,0
E:visited 匹配所有已被点击的链接 1 0,0,1,0
E:active] 匹配鼠标已经激活还没有释放的E元素 1 0,0,1,0
E:hover 匹配鼠标悬停其上的E元素 1 0,0,1,0
E:lang(language) 匹配lang属性等于language 2 0,0,1,0
E:focus 匹配获得当前焦点的E元素 2 0,0,1,0
E:first-child 匹配父元素的第一个子元素 2 0,0,1,0

CSS3中伪类,比如:hover写为::hover,这是为了与伪元素作区分,为了支持旧版的网站,以前的单引号伪类还有效

与用户界面有关的伪类
选择器 含义 CSS版本 优先级
E:enabled 匹配表单中激活的元素 3 0,0,1,0
E:disabled 匹配表单中禁用的元素 3 0,0,1,0
E:checked 匹配获得当前焦 3 0,0,1,0
结构性伪类
选择器 含义 CSS版本 优先级
E:root 匹配文档的根元素,对于HTML文档,就是HTML元素 3 0,0,1,0
E:nth-child(n) 匹配其父元素的第n个子元素,第一个编号为1 3 0,0,1,0
E:nth-last-child(n) 匹配其父元素的倒数第n个子元素,第一个编号为1 3 0,0,1,0
E:nth-of-type(n) 与:nth-child()作用类似,但是仅匹配使用同种标签的元素 3 0,0,1,0
E:nth-last-of-type(n) 与:nth-last()作用类似,但是仅匹配使用相同标签的元素 3 0,0,1,0
E:last-child 匹配父元素的最后一个子元素,等同于:nth-last-child(1) 3 0,0,1,0
E:first-of-type 匹配父元素下使用同种标签的第一个子元素,等同于:nth-of-type(1) 3 0,0,1,0
E:last-of-type 匹配父元素下使用同种元素的最后一个子元素,等同于:nth-last-of-type(1) 3 0,0,1,0
E:only-child 匹配父元素下仅有的一个子元素,等同于:first-child:last-child或:nth-child(1):nth-last-child(1) 3 0,0,1,0
E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素,等同于:first-of-type:last-of-type或:nth-of-type(1):nth-last-of-type(1) 3 0,0,1,0
E:empty 匹配一个不包含任何子元素的元素,注意,文本借点也被看作子元素 3 0,0,1,0
反选伪类
选择器 含义 CSS版本 优先级
E:not(selector) 匹配非当前选择起的任何元素 3 0,0,0,0
target伪类
选择器 含义 CSS版本 优先级
E:target 匹配文档中特定"id"点击后的效果 3 0,0,1,0
伪元素
选择器 含义 CSS版本 优先级
E:first-line 匹配E元素的第一行 2 0,0,0,1
E:first-letter 匹配E元素的第一个字母 2 0,0,0,1
E:before 在E元素之前插入生成的内容 2 0,0,0,1
E:after 在E元素之后插入生成的内容 2 0,0,0,1
E::selection 匹配用户当前选中的元素 3 0,0,0,1
E::placeholder 控制表单输入框占位符的外观,浏览器暂时不支持 3 0,0,0,1
Selectors Level 4

暂略

Selectors Level 4
Selectors Level 4草案
CSS4 Rocks

CSS选择器,优先级与匹配原理

浏览器通过优先级来判断哪一些属性应该应用到一个元素上.优先级就是分配给指定的CSS声明的一个权重,它由匹配的选择器中的每一个选择器类型的值来决定.

选择器的权重(特殊性)升序排列:

继承

通用元素

标签|伪元素

类|属性|伪类

ID

内联样式

!important

所有的选择器权重都是通过相加计算,大的优先;如果权重一样大,后定义的优先.

此外,优先级还要考虑到CSS样式的来源,样式表可能有三种不同的来源:作者,用户和客户端,按升序排列:

客户端声明(UA declarations)

一般用户声明(user normal declarations)

一般作者声明( author normal declarations )

加了 "!important" 的作者声明( author important declarations )

加了 "!important" 的用户声明( user important declarations )

当拥有相同重要性和来源,按照CSS特殊性来排序.引用的样式表(@import )中的规则被认为出现在样式表本身的所有规则之前,在@charset之后
!important

使用!important可以覆盖任何其它没有使用!important的规则,在IE6时代!important多用来hack,不过现在不建议使用,除非需要在外部css文件中提升优先级

一些Demo :not反转伪类

:notDemo

这里明显可以看出,:not不参与权重计算

基于形式的优先级

选择器的形式

由此可见,属性选择器里面的选择器不参与权重计算,它的权重只是属性选择器的权重

关于后代元素选择器

后代元素选择器

对于后代元素选择器来说,祖先选择器跟每个后代元素的距离都是一样的.在这个例子中,由于优先级一样,所以后面的.red p覆盖前面的.green p

覆盖之前:

1.颜色是? 绿色
2.颜色是? 红色
3.颜色是? 红色
4.颜色是? 绿色

覆盖之后:

1.颜色是? 红色
2.颜色是? 红色
3.颜色是? 红色
4.颜色是? 绿色

相关参考:
优先级
KB005: CSS 层叠

GPU云服务器 云服务器 css选择器 基础选择器css css选择 js css 加载器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116437.html

相关文章

  • WEB前端 CSS

    摘要：后代选择器，儿子选择器，毗邻选择器，弟弟选择器。后代选择器后代选择器标签选择器后跟标签后代，无论直属还是间接直属，直接后代毗邻后代中最近的一个弟弟，找到和自己同级的标签如通过多个选择器好到具体的标签。目录 WEB前端 CSS WEB前端 CSS TOC CSS简介 CSS引入方式 CSS结构 CSS选择器 标签选择...

    darry 评论0 收藏0

  • 编写高效的 CSS 选择器 – CSS魔法

    摘要：最基本的选择器是元素选择器比如选择器比如还有类选择器比如。选择器和类选择器在速度上的差异基本上没有关系。现在我们回到讨论开始的地方，哪类选择器是最高效的哪个是会影响选择器效率的关键选择器写代码的时候，关键选择器是能否高效的决定因素。 高效的CSS已经不是一个新的话题了，也不是我一个非得重拾的话题，但它却是我在工作之时，所感兴趣的，关注已久的话题。 有很多人都忘记了，或在简单的说没有意识...

    forrest23 评论0 收藏0

  • 编写高效的 CSS 选择器 – CSS魔法

    摘要：最基本的选择器是元素选择器比如选择器比如还有类选择器比如。选择器和类选择器在速度上的差异基本上没有关系。现在我们回到讨论开始的地方，哪类选择器是最高效的哪个是会影响选择器效率的关键选择器写代码的时候，关键选择器是能否高效的决定因素。 高效的CSS已经不是一个新的话题了，也不是我一个非得重拾的话题，但它却是我在工作之时，所感兴趣的，关注已久的话题。 有很多人都忘记了，或在简单的说没有意识...

    hyuan 评论0 收藏0

  • 前端面试题-CSS选择器性能优化

    摘要：不要在编写规则时用标签名或类名不要在编写规则时用标签名把多层标签选择规则用规则替换，减少查找避免使用子选择器后代选择器在中是最昂贵的选择器。如果你关心页面性能的话，他们真不该被使用扩展阅读前端面试题选择器前端面试题优先级 一、CSS选择符 CSS选择符由一些初始化参数组成，这些参数指明了要应用这个CSS规则的页面元素。 作为一个网站的前端开发工程师，应该避免编写一些常见的开销很大的CS...

    Scott 评论0 收藏0

  • 前端面试题-CSS选择器性能优化

    摘要：不要在编写规则时用标签名或类名不要在编写规则时用标签名把多层标签选择规则用规则替换，减少查找避免使用子选择器后代选择器在中是最昂贵的选择器。如果你关心页面性能的话，他们真不该被使用扩展阅读前端面试题选择器前端面试题优先级 一、CSS选择符 CSS选择符由一些初始化参数组成，这些参数指明了要应用这个CSS规则的页面元素。 作为一个网站的前端开发工程师，应该避免编写一些常见的开销很大的CS...

    XGBCCC 评论0 收藏0

发表评论

登陆后可评论

0条评论

张金宝

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<