资讯专栏INFORMATION COLUMN

CSS权重的比较方法

cyixlq / 1943人阅读

摘要:的权重如下正无穷行间样式属性唯类标签伪元素通配符进制当出现多个选择器时在同一行的选择器权重相加即可当两个混合选择器权重相同时优先选择后面的选择器如两者权重相同但是遵从先来后到所以显示为绿色本人小白开通博客只是为了学习交流发的东西比较

 CSS的权重如下:

!important  Infinity正无穷
 行间样式  1000
 id     100
 class|属性|唯类 10
 标签|伪元素  1
 通配符   0
 256进制

当出现多个选择器时 在同一行的选择器权重相加即可

当两个混合选择器权重相同时优先选择后面的选择器

如:

html

1

css:

#idDiv p.classP{

background-color:red;

}

div .classP#idP{

background-color:green;

}

两者权重相同 但是遵从先来后到 所以显示为绿色

 

 

 

<--本人小白 开通博客只是为了学习交流发的东西比较低级 不喜勿喷 谢谢!!-->

 

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

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

相关文章

  • 20180224-css选择器权重

    摘要:选择器的权重第一种情况样式表中只有单一样式即内联元素第二种情况组合选择器从左往右逐个比较,按进行比较越大权重越高。 css选择器的权重showImg(https://segmentfault.com/img/bV4dpB?w=542&h=376); 1第一种情况: 样式表中只有单一样式: 即 内联>id>class>元素 #id{} .class{} p{} 2第二种情况: 组合选择器...

    邹强 评论0 收藏0
  • 编写高质量CSS

    摘要:以上,从分层组织,模块化,使用时注意低权重原则,以及巧用雪碧图阐述了提高代码质量的四个方面。编写高质量代码前端开发修炼之道曹刘阳 分层组织CSS 我们应用CSS的能力应该分成两部分:一部分是CSS的API,重点是如何用CSS控制页面内元素的样式;另一部分是CSS框架,重点是如何对CSS进行组织。 推荐一种组织CSS的方法: base.css + common.css + page.c...

    xuexiangjys 评论0 收藏0
  • 前端杂谈: CSS 权重 (Specificity)

    摘要:前端杂谈权重权重想必大家都听说过一些简单的规则大部分人也都知道较长的权重会大于较短的权重高于但是具体规范是什么浏览器是按照什么标准来判定不同选择器的权重的呢让我们来看一下官方文档是怎么说的第一个关键词官方文档中用特异性来表示一个和其元素的相 前端杂谈: CSS 权重 (Specificity) css 权重想必大家都听说过, 一些简单的规则大部分人也都知道: 较长的 css sele...

    SimonMa 评论0 收藏0
  • CSS中选择器权重

    摘要:内联样式外部样式选择器类型选择器栗子标签属性伪类伪元素相邻选择器子代选择器权重计算规则内联样式,如,权值为。选择器,如,权值为。之所以有这样的错觉,是因为确实行间为第一等的权重,所以它的权重是最高的。通配符子选择器相邻选择器等的。 CSS 具有自己的优先级计算方法,而不仅仅是行间>内部>外部、ID>class>元素 1. 样式类型 行间样式 我的行间CSS样式。 内联样式 h1{...

    BlackHole1 评论0 收藏0
  • link和@import区别浅析

    摘要:结论就结论而言,强烈建议使用标签,慎用方式。这样可以避免考虑的语法规则和注意事项,避免产生资源文件下载顺序混乱和请求过多的烦恼。区别从属关系区别是提供的语法规则,只有导入样式表的作用是提供的标签,不仅可以加载文件,还可以定义连接属性等。 我们都知道,外部引入 CSS 有2种方式,link标签和@import。它们有何本质区别,有何使用建议,在考察外部引入 CSS 这部分内容时,经常被提...

    YFan 评论0 收藏0

发表评论

0条评论

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