css-选择器

jlanglang 发布于2019-08-30 15:53 / 2150人阅读

摘要：作为一个前端码农，不少接触，懂各种选择器以及权重值计算很重要，想当然的觉得选择器没什么难点的，就像我这样的，反正一层一层加，肯定能覆盖我之前写的，那最后的代码后期维护起来想想都怕怕哦。

作为一个前端码农，不少接触CSS，懂CSS各种选择器以及权重值计算很重要，想当然的觉得CSS选择器没什么难点的，就像我这样的，反正一层一层加，肯定能覆盖我之前写的，那最后的代码后期维护起来想想都怕怕哦。所以今天利用六分钟的时间学学CSS选择器以及权重计算还是很重要的。

常用的CSS选择器概括

通配符选择器（*）-0
标签选择器-1
伪元素（::after,::before,::selection,::first-line,::first:letter）-1
类选择器-10
伪类选择器（:link,:hover,:active,:visited,:root,:target,:not）-10
属性选择器（[title],[title=value]）-10
id选择器-100
内联样式-1000

作为补充，
1. 还有 后代选择器 ，亲子选择器>，兄长选择器~，相邻选择器+,权重拆分为两个算再计算求和
2. !important 最重要权重，优于一切，对于分别给类选择器和标签选择器样式添加!mportant，按其他选择器权重和高的样式为准

通配符选择器 *

通配符选择器都是怎么用呢？

一般清除默认样式的时候，用通配符设置，通配符设置的样式覆盖了默认样式，默认样式既是继承，继承是没有权重的
因为继承无权重，所以可以被通配符权重为0 的选择器设置的样式覆盖

标签选择器，伪元素选择器

这两个归为权重值相同的一类，可以理解。渲染完页面，控制台elements展示的源码中，伪元素作为和标签一样展示。

类选择器，伪类选择器，属性选择器

理解为挂在类选择器上的，想想是不是？
比如.classs,.class[title],.class[title="text"],.class:hover,:class:active

id选择器

从理解js获取dom节点来看，getElementByID,获取到的只有一个，可想而知比class权重也高，只能唯一设置，享有唯一性。

内联选择器

记住就近原则，可想而知内联选择器权重值最大---1000，上面的依次减一个0，最后通配符0

除了权重之外

以上选择器是有权重计算的，还常常见到因为顺序以及设置css来源不同，导致渲染出结果不同的情况，解析：

就近原则
内联样式一定优先于外联样式，
同等权重时后设置样式一定大于前设置的样式，
用户自定义的 > 开发人员设置的 > 用户代理默认的（浏览器默认的）

由此推荐链接样式排序(link-visited-hover-active, LVHA)

其都是伪类元素，权重一样，后覆盖前，所以为了防止点击后（visited）以及未访问(:link)，:hover
和:active不能触发，设置了LVHA原则。
因为任何链接不是已访问，就是未访问，所以将lV放后面会覆盖前两个的样式。

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

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

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

WEB前端 CSS

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

darry 2019-04-23 13:34 评论0 收藏0
编写高效的 CSS 选择器 – CSS魔法

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

forrest23 2019-08-02 16:16 评论0 收藏0
编写高效的 CSS 选择器 – CSS魔法

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

hyuan 2019-08-30 10:50 评论0 收藏0
前端面试题-CSS选择器性能优化

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

Scott 2019-08-30 14:08 评论0 收藏0
前端面试题-CSS选择器性能优化

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

XGBCCC 2019-08-01 18:42 评论0 收藏0