色偷偷精品一区二区三区,亚精品中文字幕二区三区,国产精品视频免费播放

瀏覽器中得優(yōu)先級(jí)是由A、B、C、D的值來(lái)決定的，計(jì)算規(guī)則如下：

如果存在內(nèi)聯(lián)樣式，那么A=1,否則A=0；B的值為ID選擇器出現(xiàn)的次數(shù)C的值為類選擇器和屬性選擇器和偽類出現(xiàn)的總次數(shù)D的值為標(biāo)簽選擇器和偽元素出現(xiàn)的總次數(shù)

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) */

比較規(guī)則是: 從左往右依次進(jìn)行比較，較大者勝出，如果相等，則繼續(xù)往右移動(dòng)一位進(jìn)行比較。如果4位全部相等，則后面的會(huì)覆蓋前面的

1、標(biāo)簽選擇器：匹配所有使用p標(biāo)簽的樣式p{color:red}

3、class選擇器：誰(shuí)指定的class誰(shuí)變色，可選多個(gè),比如.info{color:red}、p.info{color:red}

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*后代選擇器，選擇所有class為div1后的p標(biāo)簽*/ .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>  <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>最后一個(gè)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標(biāo)簽中的*/ div[A=a1]{ color: blueviolet; /* * 這個(gè)和第一個(gè)優(yōu)先級(jí)是相同的 * 應(yīng)該顯示下面的，但是第一個(gè)查找的范圍廣 * 所以也會(huì)顯示第一個(gè)的樣式 */ /*3.匹配所有屬性為A，并且具有多個(gè)空格分隔的值,其中一個(gè)只等于a1的*/ div[A~=a1]{ background-color: darkkhaki; } /*4.匹配屬性值以指定值開頭的每個(gè)元素，并且在div標(biāo)簽中*/ div[A^=a]{ background-color: antiquewhite } /*5.匹配屬性值以指定值結(jié)尾的每個(gè)元素*/ div[A$=1]{ background-color: blue; } /*6.匹配屬性值中包含指定值的每個(gè)元素 */ 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>

a:link（沒(méi)有接觸過(guò)的鏈接）,用于定義了鏈接的常規(guī)狀態(tài)。 a:hover（鼠標(biāo)放在鏈接上的狀態(tài)）,用于產(chǎn)生視覺(jué)效果。 a:visited（訪問(wèn)過(guò)的鏈接）,用于閱讀文章，能清楚的判斷已經(jīng)訪問(wèn)過(guò)的鏈接。 a:active（在鏈接上按下鼠標(biāo)時(shí)的狀態(tài)）,用于表現(xiàn)鼠標(biāo)按下時(shí)的鏈接狀態(tài)。偽類選擇器 : 偽類指的是標(biāo)簽的不同狀態(tài): a ==> 點(diǎn)過(guò)狀態(tài) 沒(méi)有點(diǎn)過(guò)的狀態(tài) 鼠標(biāo)懸浮狀態(tài) 激活狀態(tài) a:link {color: #FF0000} /* 未訪問(wèn)的鏈接 */ a:visited {color: #00FF00} /* 已訪問(wèn)的鏈接 */ a:hover {color: #FF00FF} /* 鼠標(biāo)移動(dòng)到鏈接上 */ a:active {color: #0000FF} /* 選定的鏈接 */ 格式: 標(biāo)簽:偽類名稱{ css代碼; }

繼承是一種機(jī)制，它允許樣式不僅可以應(yīng)用于某個(gè)特定的元素，還可以應(yīng)用于它的后代

給body設(shè)置了顏色，這樣body里面元素都會(huì)繼承該樣式，但是繼承的權(quán)重很低，比普通元素還要低，給任意元素添加個(gè)顏色，都會(huì)把繼承的顏色覆蓋掉。由此可見(jiàn)：任何顯示申明的規(guī)則都可以覆蓋其繼承樣式。　

CSS繼承也有一些限制，有一些屬性不可被繼承，如：border、margin、padding、background。等

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享網(wǎng)絡(luò)內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-62778877-8306；郵箱：fanjiao@west.cn。本站原創(chuàng)內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明出處：西部數(shù)碼知識(shí)庫(kù) » 詳解CSS中的選擇器和優(yōu)先級(jí)

熱門搶注

熱門競(jìng)價(jià)

推薦一口價(jià)

猜你還會(huì)喜歡下面的內(nèi)容

熱門標(biāo)簽

大家感興趣的內(nèi)容

切換注冊(cè)登錄

切換登錄注冊(cè)