详解CSS中的选中器和优先级
阅读器中也具有优先级得算法
阅读器中得优先级是由A、B、C、D的值来决议的,运算规则如下:
- 假如存在内联样式,那么A=1,不然A=0;
- B的值为ID选中器显现的次数
- C的值为类选中器和属性选中器和伪类显现的总次数
- D的值为标签选中器和伪元素显现的总次数
li /* (0, 0, 0, 1) */ ul li /* (0, 0, 0, 2) */ ul ol+li /* (0, 0, 0, 3) */ ul ol+li /* (0, 0, 0, 3) */ h1 + *[REL=up] /* (0, 0, 1, 1) */ ul ol li.red /* (0, 0, 1, 3) */ li.red.level /* (0, 0, 2, 1) */ a1.a2.a3.a4.a5.a6.a7.a8.a9.a10.a11 /* (0, 0, 11,0) */ #x34y /* (0, 1, 0, 0) */ li:first-child h2 .title /* (0, 0, 2, 2) */ #nav .selected > a:hover /* (0, 1, 2, 1) */ html body #nav .selected > a:hover /* (0, 1, 2, 3) */
比力规则是: 从左往右顺次停止比力 ,较大者胜出,假如相等,则连续往右移动一位停止比力 。假如4位全部相等,则后面的会覆盖前面的
内联样式优先级最高,但是外部样式也可以覆盖内联样式,只需要 ! important,假如不是为了覆盖内联样式,尽量少使用!!!
css根本选中器
1、标签选中器:匹配所有使用p标签的样式p{color:red}
2、id选中器:匹配指定的标签#p2{color:red}
3、class选中器:谁指定的class谁变色,可选多个,比方.info{color:red}、p.info{color:red}
4、通用选中器:所有的标签都改动
组合选中器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*后代选中器,选中所有class为div1后的p标签*/ .div1 p{ background-color: red; } /*子代选中器*/ .div3>p{ color:#0000FF; } /*相邻选中器*/ .div2+p{ background-color: #008000; } /*兄弟选中器*/ .div2~p{ background-color: hotpink; } /*多元素选中器*/ .div2,p{ background-color: #7FFFD4; } .div1 .div2,.div1~p{ background-color: blueviolet; font-size: 20px; } </style> </head> <body> <!-- 1.后代选中器:.div1 p 2.子代选中器:.div3>p 3.多元素选中器:同时匹配所有指定元素 .div1 .div2,.div1~p 4.相邻选中器(紧受着寻相邻的,只寻下面不寻上面).div2+p 5.兄弟选中器 .div2~p --> <p>你好我是p</p> <div class="div1"> <div class="div2"> <p>我是div2下p1</p> <div class="div3"> <p>div3</p> </div> </div> <p>我是div2相邻的元素p</p> <h1 class="h1">h1</h1> <h2>h2</h2> </div> <div class="div1"> <em>hello world</em> <div class="div2"> <p>hello world div2</p> <br/> <b>hello hello</b> </div> </div> <h3>h3</h3> <p>最后一个p</p> </body> </html>
属性选中器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*1.匹配所有A属性,并且在div中*/ div[A]{ color: aquamarine; } /*2.匹配所有A=a1的并且只是在div标签中的*/ div[A=a1]{ color: blueviolet; /* * 这个和第一个优先级是雷同的 * 应当显示下面的,但是第一个查寻的范畴广 * 所以也会显示第一个的样式 */ /*3.匹配所有属性为A,并且具有多个空格分隔的值,其中一个只等于a1的*/ div[A~=a1]{ background-color: darkkhaki; } /*4.匹配属性值以指定值开头的每个元素,并且在div标签中*/ div[A^=a]{ background-color: antiquewhite } /*5.匹配属性值以指定值结尾的每个元素*/ div[A$=1]{ background-color: blue; } /*6.匹配属性值中包括指定值的每个元素 */ div[A*=a] { background-color: saddlebrown; } } </style> </head> <body> <div> <div A=" a1 ">1111</div> <div A="a1">2222</div> <div A="a2">3333</div> <div B="a1">4444</div> </div> </body> </html>
伪类
anchor伪类:专用于操纵链接的显示结果
a:link(没有接触过的链接),用于定义了链接的常规状态。 a:hover(鼠标放在链接上的状态),用于发生视觉结果。 a:visited(拜访过的链接),用于阅读文章,能分明的推断已经拜访过的链接。 a:active(在链接上按下鼠标时的状态),用于展现鼠标按下时的链接状态。 伪类选中器 : 伪类指的是标签的不一样状态: a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态 a:link {color: #FF0000} /* 未拜访的链接 */ a:visited {color: #00FF00} /* 已拜访的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 */ 格局: 标签:伪类名称{ css代码; }
before after 伪类
:before p:before 在每个<p>元素此前插入内容
:after p:after 在每个<p>元素之后插入内容
例:p:before{content:"hello";color:red;display: block;}
css的继承
继承是一种机制,它同意样式不仅可以利用于某个特定的元素,还可以利用于它的后代
body{color:blue;}
给body设定了色彩,这样body里面元素都会继承该样式,但是继承的权重很低,比一般元素还要低,给任意元素增加个色彩,都会把继承的色彩覆盖掉。因而可知:任何显示说明的规则都可以覆盖其继承样式。
CSS继承也有一些限制,有一些属性不成被继承, 如:border、margin、padding、background。等
相关教程引荐:CSS视频教程 、CSS3视频教程
以上就是详解CSS中的选中器和优先级的具体内容,更多请关注百分百源码网其它相关文章!