CSS选择器】【Web前端基础】css3选择器优先级顺序

2020-10-21 10:44发布

9条回答

       1.   !important

    在属性后面写上这条样式,会覆盖掉页面上任何位置定义的元素的样式。

  2.   行内样式,在style属性里面写的样式。

  3.  id选择器

  4. class选择器

  5. 标签选择器

    6. 通配符选择器*

  7. 浏览器的自定义属性和继承


水默
3楼 · 2020-10-21 10:49

选择器的优先级

1.最高优先级是 (直接在标签中的设置样式,假设级别为1000)

2.次优先级是(ID选择器 ,假设级别为100) #myDiv{color:Red;}

3.其次优先级是(类选择器,假设级别为10) .divClass{color:Red;}

4.最后优先级是 (标签选择器,假设级别是 1) div{color:Red;}


浅浅77
4楼 · 2020-10-21 11:26

在看css选择器优先级顺序前,我们先来简单说说css基本选择器有哪些?

1、标记选择器(如:body,div,p,ul,li)

2、id选择器(如:id="name",id="name_txt")

3、类选择器(如:id="name",id="name_txt")

4、后代选择器(如:#head .nav ul li 从父集到子孙集的选择器)

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.后代选择器(li a)

6.伪类选择(a:hover,li:nth-child)

最后,需要注意的是:  

  • !important的优先级是最高的,但出现冲突时则需比较”四位数“;
    优先级相同时,则采用就近原则,选择最后出现的样式;
    继承得来的属性,其优先级最低。


乐xenia
5楼 · 2020-10-21 15:58

css的选择器有很多种,那么,自然而然的就会有优先级这一概念出现,所以,css选择器优先级顺序是怎样的呢?本篇文章将来给大家介绍css选择器优先级的排序,话不多说,我们来直接看正文内容。
在看css选择器优先级顺序前,我们先来简单说说css基本选择器有哪些?

1、标记选择器(如:body,div,p,ul,li)

2、id选择器(如:id="name",id="name_txt")

3、类选择器(如:id="name",id="name_txt")

4、后代选择器(如:#head .nav ul li 从父集到子孙集的选择器)

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.后代选择器(li a)

6.伪类选择(a:hover,li:nth-child)

最后,需要注意的是:  

!important的优先级是最高的,但出现冲突时则需比较”四位数“;
优先级相同时,则采用就近原则,选择最后出现的样式;
继承得来的属性,其优先级最低。

freediandianer
6楼 · 2020-10-21 19:42

1.最高优先级是 (直接在标签中的设置样式,假设级别为1000)

2.次优先级是(ID选择器 ,假设级别为100) #myDiv{color:Red;}

3.其次优先级是(类选择器,假设级别为10) .divClass{color:Red;}

4.最后优先级是 (标签选择器,假设级别是 1) div{color:Red;}


天天
7楼 · 2020-10-22 09:48

css选择器优先级最高到最低顺序为:

1.id选择器(#myid)

2.类选择器(.myclassname)

3.标签选择器(div,h1,p)

4.子选择器(ul < li>

5.后代选择器(li a)

6.伪类选择(a:hover,li:nth-child)


风火轮
8楼 · 2020-10-22 20:48

选择器的优先级

1.最高优先级是 (直接在标签中的设置样式,假设级别为1000)

2.次优先级是(ID选择器 ,假设级别为100) #myDiv{color:Red;}

3.其次优先级是(类选择器,假设级别为10) .divClass{color:Red;}

4.最后优先级是 (标签选择器,假设级别是 1) div{color:Red;}


HUANG
9楼 · 2020-10-25 23:10

  1、行内样式>内部样式和外部样式(内部样式和外部样式按选择器权值计算,同级覆盖)    2、权重越大优先级越高   #idName>.className>tagName>* 权值( 复合选择器的权重由基础选择器的权值相加) 选择器: #idName | .className | tagName |  *   |   权值:    100        |     10           |    1          |  0   |  3、权重相同,同级覆盖(就近原则)  4、!important 权重最高 **总结:**!important > 行内样式 >内部样式和外部样式(#idName>.className>tagName>*,同级覆盖)> 默认样式


相关问题推荐

  • 回答 15
    已采纳

    css中有很多选择器,比如类别选择器、标签选择器、ID选择器、后代选择器、子选择器、伪类选择器、通用选择器、群组选择器等,常见的选择器有id选择器、类选择器、标签选择器三大类。...

  • 回答 6

    相邻兄弟选择器、通用兄弟选择器、属性选择器、伪类选择器、伪元素选择器

  • 回答 3

    1、相邻兄弟选择器作用:匹配指定元素的相邻【下一个】兄弟元素语法:由 + 号来充当连接符,如 选择器1+选择器2

  • 回答 9

    ID选择器:#header {}类选择器:.header {}元素选择器:div {}子选择器:ul > li {}后代选择器:div p {}伪类选择器:a:hover {}属性选择器:input[type=text] {}

  • 回答 6

    id选择器(#ID)在使用ID选择器之前需要先在html文档中加注ID名称,这样在样式选择器中才能找到相对应的元素,不同的是ID选择器是一个页面中唯一的值,我们在类使用时是在相对应的类名前加上一个.号(.className)而id选择器是在名称前使用#如(#id),...

  • 回答 1

    CSS 的后代选择器本身就是一种在标准里面不那么推荐的方式。首先,对浏览器来说,ID 选择器 #xx 是最快的,其次是 class 选择器、html 元素选择器等。假如 DOM 的结构如上图,e799bee5baa6e58685e5aeb931333363383938匹配规则是 .mod-nav h3 span。若从左向右...

  • 回答 2

    CSS哪些属性可以继承?css继承特性主要是指文本方面的继承,盒模型相关的属性基本没有继承特性。不可继承的:display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、top、bottom...

  • 回答 4
    已采纳

    一:块元素块元素在很多浏览器中,都是显示占据一行,并且排斥其他元素和其他元素在同一行,在浏览器中,块元素出现的形状是矩形,并且盛放其他元素。例如有div,和h1~h6,p,hr,ol,ul。这些标签应该都不是很陌生,其中,和标签是块标签,并且独立占据一行...

  • 回答 4

    CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

  • 回答 9

    CSS和CSS3都是样式,CSS3是在CSS上新增了样式属性。 CSS3新增特性CSS3圆角边框:border-radius(解决了原有圆角边框需要截图的问题)CSS3文本阴影与盒阴影:text-shadow、box-shadow(可以用于实现标签边框或阴影)CSS3背景尺寸、背景切割和背景原点:backgr...

  • 回答 7

    a:link 没有访问之前a标签的样式a:visited 已访问a标签的样式a:hover a标签鼠标移上的样式a:actived a标签鼠标按下的样式input:focus input表单元素获取焦点input:blur input表单元素失去焦点

  • 回答 1

    基于SVG实现简单时钟效果前端绘图目前浏览器端绘制图形有2种主流方式:SVG和Canvas。相对于Canvas的更加底层的绘图API,SVG是一种声明式的,更可读、易于理解、方便交换。提到前端绘图,事实上有多种技术可以选择,除了SVG和Canvas,还可以基于javascript操作...

没有解决我的问题,去提问