css优先级
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css优先级相关的知识，希望对你有一定的参考价值。
一、什么是CSS优先级?
所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。
二、CSS优先级规则
1、每个具有style=“”，权重为1000
2、每个ID选择符(#someid)，权重为100
3、每个class选择符(.someclass)、每个属性选择符(形如[attr=value]等)、每个伪类(形如:hover等)加权重为10
4、每个元素或伪元素(:firstchild)等，加权重为1
5、其它选择符包括全局选择符*，加0,0,0,0。相当于没加，不过这也是一种specificity，后面会解释。
6、出现！important 权重最高！！！
7、
1.id选择器（#myid）2.类选择器（.myclassname）3.标签选择器（div,h1,p）4.相邻选择器（h1+p）5.子选择器（ul < li）6.后代选择器（li a）7.通配符选择器（*）8.属性选择器（a[rel="external"]）9.伪类选择器（a:hover,li:nth-child）
三、具体例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <style type="text/css" media="screen"> #text{color: red} .text{color: blue;} </style> </head> <body> <div id="text" class="txt"> <p> <span>测试文字</span> </p> </div> </body> </html>
测试结果为 red
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style type="text/css" media="screen">
div.txt p span{color: orange}
.txt p span{color: red}
.txt1 span{color: blue}
</style>
</head>
<body>
<div id="text" class="txt">
<p class="txt1">
<span>测试文字</span>
</p>
</div>
</body>
</html>
测试结果为 orange
以上是关于css优先级的主要内容，如果未能解决你的问题，请参考以下文章