CSS中的选择器和优先级是什么

CSS中的选择器和优先级是什么?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

CSS选择器优先级得关系为:

<强> <代码> ! important>内联祝辞ID选择器祝辞类选择器在标签选择器。

一种优先级算法

1,内联样式表的权值最高(风格=?“)权值为1000

统计选择符中的ID属性个数。(# ID)权值为100

统计选择符中的类属性个数。(. class),权值为10

4,统计选择符中的HTML标签名个数。{例如:p},权值为1

<强>按这些规则将数字符串逐位相加,就得到最终的权重,然后在比较取舍时按照从左到右的顺序逐位比较。

1,文内的样式优先级为1,0,0,0,所以始终高于外部定义。
2,有<>强壮!重要强声明的规则高于一切。
3,如果!重要的声明冲突,则比较优先权。
4,如果优先权一样,则按照在源码中出现的顺序决定,后来者居上。
5,由继承而得到的样式没有特异性的计算,它低于一切其它规则(比如全局选择符*定义的规则)。

浏览器中也具有优先级得算法

浏览器中得优先级是由A, B, C, D的值来决定的,计算规则如下:

<李>如果存在<强>内联样式强,那么<强>=1,否则=0 , <李> B的值为<强> ID选择器强出现的次数 <李> C的值为<强>类选择器和<强>属性选择器和<强>伪类强出现的总次数 <李> D的值为<强>标签选择器和<强>伪元素强出现的总次数

/* (0,0,0,1)*/李ul/* (0, 0, 0, 2) */李ul ol +/* (0, 0, 0, 3) */李ul ol +/* (0, 0, 0, 3) */h2 + * (REL=]/* (0, 0, 1, 1) */ul ol。红色/* (0,0,1,3)*/li.red。/*级(0,0,2,- 1)*/a1.a2.a3.a4.a5.a6.a7.a8.a9.a10。a11/* (0, 0, 0) */# x34y/* (0, 1, 0, 0) */李:第一个孩子h3 .title/* (0, 0, 2, 2) */# nav .selected比;答:悬停/* (0,1,2,- 1)*/html体# nav .selected比;答:悬停/* (0,1,2,3)*/

<强>比较规则是:从左往右依次进行比较,较大者胜出,如果相等,则继续往右移动一位进行比较。如果4位全部相等,则后面的会覆盖前面的

内联样式优先级最高,但是外部样式也可以覆盖内联样式,只需要!重要,如果不是为了覆盖内联样式,尽量少使用! ! !

css基本选择器

1,标签选择器:匹配所有使用p标签的样式p{颜色:红}

2, id选择器:匹配指定的标签# p2{颜色:红}

3类选择器:谁指定的课谁变色,可选多个,比如info{颜色:红},p.info{颜色:红}

4,通用选择器:所有的标签都改变

组合选择器

& lt; !DOCTYPE html> 　　& lt; html> 　　& lt; head> 　　& lt;元charset=癠TF-8"祝辞 　　& lt; title> & lt;/title> 　　& lt;风格类型=拔谋?css"比;/*后代选择器,选择所有类为div1后的p标签*/.div1 p { 　　背景颜色:红色; 　　}/*子代选择器*/.div3> p { 　　颜色:# 0000 ff; 　　}/*相邻选择器*/.div2 + p { 　　background - color: # 008000; 　　}/*兄弟选择器*/.div2 ~ p { 　　background - color: hotpink; 　　}/*多元素选择器*/.div2 p { 　　background - color: # 7 fffd4; 　　} 　　.div1 .div2 .div1 ~ p { 　　background - color: blueviolet; 　　字体大小:20 px; 　　} 　　& lt;/style> 　　 　　& lt;/head> 　　& lt; body> 　　& lt; ! 　　1 .后代选择器:。div1 p 　　2 .子代选择器:.div3> p 　　3.多元素选择器:同时匹配所有指定元素.div1 .div2, .div1 ~ p 　　4 .相邻选择器(紧挨着找相邻的,只找下面不找上面).div2 + p 　　5.兄弟选择器.div2 ~ p 　　 　　——比; 　　& lt; p>你好我是术;/p> 　　& lt; div类=癲iv1"祝辞 　　& lt; div类=癲iv2"祝辞 　　& lt; p>我是div2下p1

　　& lt; div类=癲iv3"祝辞 　　& lt; p> div3

　　& lt;/div> 　　& lt;/div> 　　& lt; p>我是div2相邻的元素术;/p> 　　& lt; h2类=癶2"祝辞h2 　　& lt; h3> h3 　　& lt;/div> 　　 　　& lt; div类=癲iv1"祝辞 　　& lt; em>你好world 　　& lt; div类=癲iv2"祝辞 　　& lt; p> hello world div2

　　 　　& lt; br/比; 　　& lt; b>你好hello 　　& lt;/div> 　　& lt;/div> 　　& lt; h4> h4 　　& lt; p>最后一个术;/p> 　　 　　& lt;/body> 　　 　　& lt;/html>

属性选择器

& lt; !DOCTYPE html> 　　& lt; html> 　　& lt; head> 　　& lt;元charset=癠TF-8"祝辞 　　& lt; title> & lt;/title> 　　& lt;风格类型=拔谋?css"比;/* 1 .匹配所有一个属性,并且在div中*/div [A] { 　　颜色:绿玉; 　　 　　}/* 2 .匹配所有=a1的并且只是在div标签中的*/div [=a1] { 　　颜色:blueviolet;/* 　　*这个和第一个优先级是相同的 　　*应该显示下面的,但是第一个查找的范围广 　　*所以也会显示第一个的样式 　　*//* 3。匹配所有属性为A,并且具有多个空格分隔的值,其中一个只等于a1的*/div (a1 ~=) { 　　background - color: darkkhaki; 　　}/* 4。匹配属性值以指定值开头的每个元素,并且在div标签中*/div [^=) { 　　background - color: antiquewhite 　　}/* 5。匹配属性值以指定值结尾的每个元素*/div(=1美元){ 　　背景颜色:蓝色; 　　}/* 6。匹配属性值中包含指定值的每个元素*/div[一个*=]{ 　　background - color:重褐色; 　　} 　　} 　　 　　& lt;/style> 　　& lt;/head> 　　& lt; body> 　　& lt; div> 　　& lt; div=?a1“祝辞1111 & lt;/div> 　　& lt; div=癮1"祝辞2222 & lt;/div> 　　& lt; div=癮2"祝辞3333 & lt;/div> 　　B & lt; div=癮1"祝辞4444 & lt;/div> 　　& lt;/div> 　　& lt;/body> 　　& lt;/html>

CSS中的选择器和优先级是什么