css中选择器优先级问题详解

先根据引入方式分:内联样式,头部样式,外部引入;这三个的优先级依次降低;

相同的引入方式时,根据选择器优先级判断显示哪个样式,具体规则如下:

将选择器的特殊性分为4个等级,a,b,c,d

  • 行内样式,a=1
  • b 是ID选择器的总数
  • c 是类,伪类,属性选择器的总数
  • d 是元素(类型),伪元素选择器的总数

举例说明:

  选择器 特殊性 以10为基准的特殊性
1 style="" 1,0,0,0 1000
2 #id01 #id02{} 0,2,0,0 200
3 #id .class{} 0,1,1,0 110
4 div#id{} 0,1,0,1 101
5 #id{} 0,1,0,0 100
6 p.class01 .class02{} 0,0,2,1 21
7 p.class{} 0,0,1,0 10
8 div p{} 0,0,0,2 2
9 p{} 0,0,0,1 1

在 4 行中的并不是后代选择器,div和#id是挨着的,表示的是id是id的div,之前不知道,这个选择器的权重是按照一个id选择器计算,还是一个id一个元素算,经过试验,这个是按照后者,即:一个id一个元素计算的;

举例说明:

         

属性选择器的级别跟类选择器的相同,但是上边的属性选择器还带有一个元素选择器,所以最后显示的是pink;

          

这个时候两个的权重是相同的,后定义的显示,green;

另外,子元素选择器 (>) 跟兄弟选择器 (+) 这两个符号对计算权重是没有影响的。

时间: 2024-08-27 16:03:13

css中选择器优先级问题详解的相关文章

CSS中选择器优先级的权重计算

CSS中选择器优先级的权重计算 先看一段代码,如下: a{ color: red; } #box a{ color: green; } [class="box"] a{ color: gold; } .box a{ color: brown; } p a{ color: yellow; } </style> <p id='box' class="box"> <a>hello</a></p> 请问上面代码中,

CSS中选择器优先级与!important权重使用

原文:CSS中选择器优先级与!important权重使用 CSS中的选择器优先级与!important权重使用# .class选择器要高于标签选择器. #id选择器要高于.class选择器. 标签选择器是优先级最低的选择器. !important的属性它的权重值优先级最高的,大于所有的选择器. 标签选择器和.class选择器# 让我们进入标签选择器和.class选择器谁的优先级高实践,实践内容如:将HTML页面中的h2标签设置文本颜色. 代码块 Copy <!DOCTYPE html> <

CSS中的变量使用详解

CSS中的变量给了我们诸多优点:方便.代码重用.更可靠的代码库和提升防错能力. 示例 :root { --base-font-size: 16px; --link-color: #6495ed; } p { font-size: var( --base-font-size ); } a { font-size: var( --base-font-size ); color: var( --link-color ); } 基础 当使用CSS变量时,你应该了解的三个主要组成: 自定义属性 var()

css中display常用属性详解之Block(一)

用了几年的css了,css中inline | block |inline-block|table|flex从来没有做过系统的整理和分析,网上的分析文章也很多,零散. 今天有空,就在这做一下整理分析 block 解释:指定对象为块元素(占据一定矩形空间,可以通过设置高度.宽度.内外边距等属性,来调整的这个矩形的样) 特点:1.处于常规流中时,如果width没有设置,会自动填充满父容器  2.可以应用margin/padding  3.在没有设置高度的情况下会扩展高度以包含常规流中的子元素  4.处

CSS中选择器优先级顺序实战讲解

我们有些程序猿在给一个元素(比如div)应用样式的时候,会有一些疑问,为什么我写在后面的样式不能覆盖前面的样式呢,不是说CSS是层叠样式表吗? 如果你在开发中也遇到同样的问题,即在给某一元素应用样式的时候(比如写在外部样式表中),写在后面的样式不能覆盖前面定义的样式.这个时候,你可能就得考虑是不是没考虑优先级问题了. 当我们在给一个标签,比如div应用样式的时候,我们得考虑优先级问题. 下面列出的就是是选择器的优先级: 行内样式 > ID选择器样式 > 类别选择器样式 > 标记选择器样式

CSS中的盒子模型详解

很多人对盒子模型搞晕头了,下面通过一个简单的代码来分析盒子模型的结构! 为了方便方便观看!在第一个div中画了一个表格,并将其尺寸设置成与div内容大小一样!且设置body的margin和padding的属性都为0px: 本例子采用行内CSS样式! 代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//

CSS中Position 的用法详解。

记得一年前,到一家公司面试的时候,问我position有哪几个属性,我憋半天才回答出2个,大家估计都清楚,就是我们经常用到的2个(relative,absolute). 最近又用到了好多,深入研究了下. 一.语法: position:static | relative | absolute | fixed 取值: static :默认值,无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用,默认值. relative:相对定位,对象遵循正常文档流,但将依据t

关于css中的align-content属性详解

align-content 作用: 会设置自由盒内部各个项目在垂直方向排列方式. 条件:必须对父元素设置自由盒属性display:flex;,并且设置排列方式为横向排列flex-direction:row;并且设置换行,flex-wrap:wrap;这样这个属性的设置才会起作用. 设置对象: 这个属性是对她容器内部的项目起作用,对父元素进行设置. 取值:stretch:默认设置,会拉伸容器内每个项目占用的空间,填充方式为给每个项目下方增加空白.第一个项目默认从容器顶端开始排列. <!DOCTYP

浅谈css中选择器的优先级

学习web前端,主要学习的课程html5,css,js,ajax等一些基本的编程语言,当然这是一门高深的学问.而这篇文章主要是谈谈我对css中选择器优先级的一些简单的理解与看法,希望对您的学习提供一些帮助.好了,废话不多说了,让我们开始进入主题吧. css中文解释是“层叠式样式表”,在这里我要说一下,所谓层叠样式表的意思就是说我们可以给一个标签或者文本内容同时添加许多种样式,简单点说就是可以通过多种方式去支配同一个东西.那么就会出现这样的问题了——选择优先级的问题.就是谁的属性能起到控制的最终目