探讨浏览器CSS选择器的权重!!!
生活随笔
收集整理的這篇文章主要介紹了
探讨浏览器CSS选择器的权重!!!
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>js控制CSS案例</title><!--2.設計樣式--><style>#loginSec{width:300px;height: 150px; background-color: #eee;padding: 20px;}input#username,input#pwd{outline: none;border-radius: 10px;/*圓角*/border:1px solid #666;}/*獲得焦點的樣式*/.fStyle{background-color: #ff9;border: 1px solid #f00;}.bStyle{background-color: #fff;border: 1px solid #666;}</style><!--3.寫js來控制CSS--><script>//第二部代碼升級//提取公共代碼，得到一個函數(shù);-->一門技術jquery//函數(shù)名：叫$function $(obj){return document.getElementById(obj);}//獲得焦點事件function focusStyle(obj){$(obj).className="fStyle";/* $(obj).style.backgroundColor="#ff9";$(obj).style.borderColor="#f00";*/}//失去焦點事件function blurStyle(obj){$(obj).className="bStyle";/*$(obj).style.backgroundColor="#fff";$(obj).style.borderColor="#666";*/}</script>
</head>
<body><!--1.頁內布局--><section id="loginSec"> <!--username它是實際參數(shù)-->用戶:<input type="text" id="username" οnfοcus="focusStyle('username')" οnblur="blurStyle('username')"/><br/><br/>密碼:<input type="password" id="pwd" οnfοcus="focusStyle('pwd')" οnblur="blurStyle('pwd')"/><br/><br/><button id="btnLogin">登陸</button><button id="btnEsc">取消</button></section>
</body>
</html>
第一等：代表內聯(lián)樣式，如: style=””，權值為1000。 第二等：代表ID選擇器，如：#content，權值為0100。 第三等：代表類，偽類和屬性選擇器，如.content，權值為0010。 第四等：代表類型選擇器和偽元素選擇器，如div p，權值為0001。 通配符、子選擇器、相鄰選擇器等的。如*、>、+,權值為0000。 繼承的樣式?jīng)]有權值。
1,0,0,0 > 0,99,99,99。也就是說從左往右逐個等級比較，前一等級相等才往后比。 無論是行間、內部和外部樣式，都是按照這個規(guī)則來進行比較。而不是直觀的行間>內部>外部樣式；ID>class>元素。之所以有這樣的錯覺，是因為確實行間為第一等的權重，所以它的權重是最高的。而內部樣式可能一般寫在了外部樣式引用了之后，所以覆蓋掉了之前的。 在權重相同的情況下，后面的樣式會覆蓋掉前面的樣式。 通配符、子選擇器、相鄰選擇器等的。雖然權值為0000，但是也比繼承的樣式優(yōu)先。
!important 的作用是提升優(yōu)先級，換句話說。加了這句的樣式的優(yōu)先級是最高的（比內聯(lián)樣式的優(yōu)先級還高)。<style>p{color:red !important;}
</style>
<p style="color:blue;">我顯示紅色</p> ie7+和別的瀏覽器對important的這種作用的支持度都很好。只有ie6有些bugp{color:red !important;color:blue;
}//會顯示blue
a{color: yellow;} /*特殊性值：0,0,0,1*/div a{color: green;} /*特殊性值：0,0,0,2*/
.demo a{color: black;} /*特殊性值：0,0,1,1*/.demo input[type="text"]{color: blue;} /*特殊性值：0,0,2,1*/.demo *[type="text"]{color: grey;} /*特殊性值：0,0,2,0*/#demo a{color: orange;} /*特殊性值：0,1,0,1*/div#demo a{color: red;} /*特殊性值：0,1,0,2*/<a href="">第一條應該是黃色</a> <!--適用第1行規(guī)則-->
<div class="demo"><input type="text" value="第二條應該是藍色" /><!--適用第4、5行規(guī)則，第4行優(yōu)先級高--><a href="">第三條應該是黑色</a><!--適用第2、3行規(guī)則，第3行優(yōu)先級高-->
</div>
<div id="demo"><a href="">第四條應該是紅色</a><!--適用第5、6行規(guī)則，第6行優(yōu)先級高-->
</div>
出現(xiàn)的問題是邊框設置無效，焦點 獲得和消失，后來問了下，發(fā)現(xiàn)是焦點權重問題，把權重問題給他家分享下。
改成input直接設置，就好了。分享CSS權重幾倍知識點如下：
CSS有自己的優(yōu)先級計算公式，而不僅僅是行間>內部>外部樣式；ID>class>元素。
一、樣式類型
1、行間
<h1 style="font-size:12px;color:#000;">我的行間CSS樣式。</h1>?
2、內聯(lián)
<style type="text/css">h1{font-size:12px;color:#000;} </style>? 3、外部
<link rel="stylesheet" href="css/style.css">二、選擇器類型
1、ID #id
2、class .class
3、標簽 p
4、通用 *
5、屬性 [type="text"]
6、偽類 ：hover
7、偽元素 ::first-line
8、子選擇器、相鄰選擇器
三、權重計算規(guī)則
四、比較規(guī)則
五、！important
但是這并不說明ie6不支持important，只是支持上有些bug。看下面
p{color:red !important; } p{color:blue; } //這樣就會顯示的是red。說明ie6還是支持important的。六、實例
總結
以上是生活随笔為你收集整理的探讨浏览器CSS选择器的权重!!!的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 深入javascript中的exec与m
- 下一篇： jQuery前端教程-张晨光-专题视频课