选择器的优先级顺序

css的选择器有哪些优先级

1、标记选择器(如:body,div,p,ul,li)
2、id选择器(如:id=“name“,id=“name_txt“)
3、类选择器(如:id=“name“,id=“name_txt“)
4、后代选择器(如:#head.navulli从父集到子孙集的选择器)
5、子元素选择器(如:div》p,带大于号》)
6、伪类选择器(如:就是链接样式,a元素的伪类,4种不同的状态:link、visited、active、hover。)
看完了基本的css选择器类型后,我们接着来看一下css优先级的概念。
当两个规则都作用到了同一个html元素上时,如果定义的属性有冲突,那么应该用谁的值的,用到谁的值谁的优先级就高。
我们来看一下css选择器优先级的算法:
每个规则对应一个初始“四位数“:0、0、0、0
若是行内选择符,则加1、0、0、0
若是ID选择符,则加0、1、0、0
若是类选择符/伪类选择符,则分别加0、0、1、0
若是元素选择符,则分别加0、0、0、1
算法:将每条规则中,选择符对应的数相加后得到的”四位数“,从左到右进行比较,大的优先级越高。
看完了上述内容,那我们就来看看css选择器优先级的具体排序。
css选择器优先级最高到最低顺序为:
1.id选择器(#myid)
2.类选择器(.myclassname)
3.标签选择器(div,h1,p)
4.子选择器(ul《li)
5.后代选择器(lia)
6.伪类选择(a:hover,li:nth-child)
最后,需要注意的是:
!important的优先级是最高的,但出现冲突时则需比较”四位数“;
优先级相同时,则采用就近原则,选择最后出现的样式;
继承得来的属性,其优先级最低。

CSS class 和 id 两个选择器,哪个优先级高

CSS样式选择器分为4个等级,a、b、c、d,可以以这四种等级为依据确定CSS选择器的优先级。
1.如果样式是行内样式(通过Style=””定义),那么a=1
2.b为ID选择器的总数
3.c为Class类选择器的数量。
4.d为类型选择器的数量
5.属性选择器,伪类选择器和class类选择器优先级一样,伪元素选择器和类型选择器一样
6.!important 权重最高,比 inline style 还要高

标记选择器、类选择器、id选择器、伪类选择器的先后顺序是什么

1、id选择器;
2、类选择器;
3、标记选择器;
4、最后是伪选择器。
1.
id选择器(#myid);
2.
类选择器(.myclassname);
3.
标签选择器(div,h1,p);
4.
相邻选择器(h1+p);
5.
子选择器(ul

li);
6.
后代选择器(li
a);
7.
通配符选择器(*);
8.
属性选择器(a);
9.
伪类选择器(a:hover,li:nth-child)。
参考资料
百度百科.百度

css规定选择器优先级顺序

1. !important
  在属性后面写上这条样式,会覆盖掉页面上任何位置定义的元素的样式。
  2. 行内样式,在style属性里面写的样式。
  3. id选择器
  4. class选择器
  5. 标签选择器
  6. 通配符选择器*
  7. 浏览器的自定义属性和继承
css选择器依照以上顺序排列优先级

标记选择器,类选择器,id选择器,伪类选择器的优先级顺序

选择器的优先级顺序

  1. id 级别最高

  2. 其次是伪类

  3. 然后是类

  4. 最低的是元素

下图实例:请看红圈位置不管代码插入的顺序在第几行,他都会按照我数字标注的顺序执行

同类别选择器执行顺序

在我们布局的时候,很常用的就是,一个div使用了多个类,他到底会优先执行那个呢?

我分别设置了三个类:

30行.aaa{背景红色}

31行.bbb{背景黄}

32行.ccc{背景蓝}

执行结果

优先执行了蓝色,我们在调换下代码顺序看看

30行.ccc{背景蓝}

31行.bbb{背景黄}

32行.aaa{背景红}

执行结果

从以上测试我们得出,在设置同一类选择器的情况下,优先级是以代码插入顺序有关的,越靠后的优先级就越高。

原因:在浏览器加载的过程中,是以从上到下的顺序执行的,在加载到最后一个的时候会把之前的替换掉

css的优先级顺序是怎样的

当创建的样式表越来越复杂时,一个标签的样式将会受到越来越多的影响,这种影响可能来自周围的标签,也可能来自其自身。下面我们从这两方面去看看 CSS 样式的优先级。

CSS 的继承性

CSS 的继承特性指的是应用在一个标签上的那些 CSS 属性被传到其子标签上。看下面的 HTML 结构:

《div》
《p》《/p》《/div》

如果 《div》 有个属性 color: red,则这个属性将被 《p》 继承,即 《p》 也拥有属性 color: red。

由上可见,当网页比较复杂, HTML 结构嵌套较深时,一个标签的样式将深受其祖先标签样式的影响。影响的规则是:

CSS 优先规则1: 最近的祖先样式比其他祖先样式优先级高。

例1:

《!– 类名为 son 的 div 的 color 为 blue –》《div style=“color: red“》
《div style=“color: blue“》
《div class=“son“》《/div》
《/div》《/div》

如果我们把一个标签从祖先那里继承来的而自身没有的属性叫做“祖先样式“,那么“直接样式“就是一个标签直接拥有的属性。又有如下规则:

CSS 优先规则2:“直接样式“比“祖先样式“优先级高。

例2:

《!– 类名为 son 的 div 的 color 为 blue –》《div style=“color: red“》
《div class=“son“ style=“color: blue“》《/div》《/div》

选择器的优先级

上面讨论了一个标签从祖先继承来的属性,现在讨论标签自有的属性。在讨论 CSS 优先级之前,先说说 CSS 7 种基础的选择器:

  • ID 选择器, 如 #id{}

  • 类选择器, 如 .class{}

  • 属性选择器, 如 a{}

  • 伪类选择器, 如 :hover{}

  • 伪元素选择器, 如 ::before{}

  • 标签选择器, 如 span{}

  • 通配选择器, 如 *{}

  • CSS 优先规则3:优先级关系:内联样式 》 ID 选择器 》 类选择器 = 属性选择器 = 伪类选择器 》 标签选择器 = 伪元素选择器

    例3:

  • // HTML《div class=“content-class“ id=“content-id“ style=“color: black“》《/div》// CSS#content-id {
  •    color: red;}.content-class {
  •    color: blue;}div {
  •    color: grey;}
  • 最终的 color 为 black,因为内联样式比其他选择器的优先级高。

    所有 CSS 的选择符由上述 7 种基础的选择器或者组合而成,组合的方式有 3 种:

  • 后代选择符: .father .child{}

  • 子选择符: .father 》 .child{}

  • 相邻选择符: .bro1 + .bro2{}

  • 当一个标签同时被多个选择符选中,我们便需要确定这些选择符的优先级。我们有如下规则:

    CSS 优先规则4:计算选择符中 ID 选择器的个数(a),计算选择符中类选择器、属性选择器以及伪类选择器的个数之和(b),计算选择符中标签选择器和伪元素选择器的个数之和(c)。按 a、b、c 的顺序依次比较大小,大的则优先级高,相等则比较下一个。若最后两个的选择符中 a、b、c 都相等,则按照“就近原则“来判断。

    例4:

  • // HTML《div id=“con-id“》
  •    《span class=“con-span“》《/span》《/div》// CSS#con-id span {
  •    color: red;}div .con-span {
  •    color: blue;}
  • 由规则 4 可见,《span》 的 color 为 red。

    如果外部样式表和内部样式表中的样式发生冲突会出现什么情况呢?这与样式表在 HTML 文件中所处的位置有关。样式被应用的位置越在下面则优先级越高,其实这仍然可以用规则 4 来解释。

    例5:

  • // HTML《link rel=“stylesheet“ type=“text/css“ href=“style-link.css“》《style type=“text/css“》@import url(style-import.css); div {
  •    background: blue;}《/style》《div》《/div》// style-link.cssdiv {
  •    background: lime;}// style-import.cssdiv {
  •    background: grey;}
  • 从顺序上看,内部样式在最下面,被最晚引用,所以 《div》 的背景色为 blue。

    上面代码中,@import 语句必须出现在内部样式之前,否则文件引入无效。当然不推荐使用 @import 的方式引用外部样式文件,原因见另一篇博客:CSS 引入方式。

    CSS 还提供了一种可以完全忽略以上规则的方法,当你一定、必须确保某一个特定的属性要显示时,可以使用这个技术。

    CSS 优先规则5:属性后插有 !important 的属性拥有最高优先级。若同时插有 !important,则再利用规则 3、4 判断优先级。

    例6:

  • // HTML《div class=“father“》
  •    《p class=“son“》《/p》《/div》// CSSp {
  •    background: red !important;}.father .son {
  •    background: blue;}
  • 虽然 .father .son 拥有更高的权值,但选择器 p 中的 background 属性被插入了 !important, 所以 《p》 的 background 为 red。

    错误的说法

    在学习过程中,你可能发现给选择器加权值的说法,即 ID 选择器权值为 100,类选择器权值为 10,标签选择器权值为 1,当一个选择器由多个 ID 选择器、类选择器或标签选择器组成时,则将所有权值相加,然后再比较权值。这种说法其实是有问题的。比如一个由 11 个类选择器组成的选择器和一个由 1 个 ID 选择器组成的选择器指向同一个标签,按理说 110 》 100,应该应用前者的样式,然而事实是应用后者的样式。错误的原因是:权重的进制是并不是十进制,CSS 权重进制在 IE6 为 256,后来扩大到了 65536,现代浏览器则采用更大的数量。。还是拿刚刚的例子说明。11 个类选择器组成的选择器的总权值为 110,但因为 11 个均为类选择器,所以其实总权值最多不能超过 100, 你可以理解为 99.99,所以最终应用后者样式。

css选择器有哪些各种选择器优先级大小顺序

1、类型选择器

CSS中的一种选择器是元素类型的名称。使用这种选择器(称为类型选择器),可以向这种元素类型的每个实例上应用声明。例如,以下简单规则的选择器是H1,因此规则作用于文档中所有的H1元素。

2、简单属性选择器

CLASS属性

CLASS属性允许向一组在CLASS属性上具有相同值的元素应用声明。BODY内的所有元素都有CLASS属性。从本质上讲,可以使用CLASS属性来分类元素,在样式表中创建规则来引用CLASS属性的值,然后浏览器自动将这些属性应用到该组元素。

类选择器以标志符(句点)开头,用于指示后面是哪种类型的选择器。对于类选择器,之所以选择句点是因为在很多编程语言中它与术语“类“相关联。翻译成英语,标志符表示“带有类名的元素“。

ID属性

ID属性的操作类似于CLASS属性,但有一点重要的不同之处:ID属性的值在整篇文档中必须是唯一的。这使得ID属性可用于设置单个元素的样式规则。包含ID属性的选择器称为ID选择器。

需要注意的是,ID选择器的标志符是散列符号(#)。标志符用来提醒浏览器接下来出现的是ID值。

STYLE属性

尽管在选择器中可以使用CLASS和ID属性值,STYLE属性实际上可以替代整个选择器机制。不是只具有一个能够在选择器中引用的值(这正是ID和CLASS具有的值),STYLE属性的值实际上是一个或多个CSS声明。

通常情况下,使用CSS,设计者将把所有的样式规则置于一个样式表中,该样式表位于文档顶部的STYLE元素内(或在外部进行链接)。但是,使用STYLE属性能够绕过样式表将声明直接放置到文档的开始标记中。

3、组合选择器类型

可以将类型选择器、ID选择器和类选择器组合成不同的选择器类型来构成更复杂的选择器。通过组合选择器,可以更加精确地处理希望赋予某种表示的元素。例如,要组合类型选择器和类选择器,一个元素必须满足两个要求:它必须是正确的类型和正确的类以便使样式规则可以作用于它。

外部信息:伪类和伪元素

在CSS1中,样式通常是基于在HTML源代码中出现的标记和属性。对于很多设计情景而言这种做法完全可行,但是它无法实现设计者希望获得的一些常见的设计效果。

设计伪类和伪元素可以实现其中的一些效果。这两种机制扩充了CSS的表现能力。在CSS1中,使用伪类可以根据一些情况改变文档中链接的样式,如根据链接是否被访问,何时被访问以及用户和文档的交互方式来应用改变。借助于伪元素,可以更改元素的第一个字母和第一行的样式,或者添加源文档中没有出现过的元素。

伪类和伪元素都不存在于HTML;也就是说,它们在HTML代码中是不可见的。这两种机制都得到了精心设计以便能够在CSS以后的版本中做进一步地扩充;也就是说实现更多的效果。

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式的能力。

如何确定CSS选择器的优先级

CSS选择器优先级
(1)CSS选择器都有权重值,权重值越大优先级越高。
内联样式表的权重值最高,值为1000。
id选择器的权重值为100。
class选择器的权值为10。
类型(元素)选择器的优先级为1。
通配符选择器的优先级为0。
(2)当权值相等时,后定义的样式表要优于先定义的样式表。
(3)在同一组属性设置中表有“!important“规则的优先级最大。

标记选择器,类选择器,id选择器,伪类选择器的优先级顺序

1、最高级的是标签选择器(就是你说的标记选择器)
2、其次是ID选择器
3、然后是类选择器
注意,如果CSS语句后面有
!important,代表最高优先级