资讯专栏INFORMATION COLUMN

css-选择器

jlanglang / 1947人阅读

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

作为一个前端码农,不少接触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放后面会覆盖前两个 的样式。

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

转载请注明本文地址:https://www.ucloud.cn/yun/116674.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
  • 关于css选择的小归纳(一)

    摘要:关于中选择器的小归纳一基本选择器基本选择器是我们平常用到的最多的也是最便捷的选择器,其中有元素选择器类似于,,,,类选择器我们在标签里面为其添加的,选择器与类选择器类似,普遍选择器,并且选择器类似的写法和并列选择器类似的写法元素选择器范例你 关于css中选择器的小归纳 一、基本选择器 基本选择器是我们平常用到的最多的也是最便捷的选择器,其中有元素选择器(类似于a,div,body,ul...

    kbyyd24 评论0 收藏0

发表评论

0条评论

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