CSS权重的比较方法

cyixlq 发布于2019-04-23 13:40 / 1861人阅读

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

CSS的权重如下：

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

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

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

如：

html

css:

#idDiv p.classP{

background-color:red;

}

div .classP#idP{

background-color:green;

}

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

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

云服务器专线服务 php权重的问题过期的域名权重如何 css的样式网站的css

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

转载请注明本文地址：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第二种情况：组合选择器...

邹强 2019-08-30 14:01 评论0 收藏0
编写高质量的CSS

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

xuexiangjys 2019-08-29 11:09 评论0 收藏0
前端杂谈: CSS 权重 (Specificity)

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

SimonMa 2019-08-29 17:18 评论0 收藏0
CSS中选择器的权重值

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

BlackHole1 2019-08-29 14:17 评论0 收藏0
link和@import的区别浅析

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

YFan 2019-08-29 16:19 评论0 收藏0