css權重
-!importtant
infinity
行間樣式
1000
id100
class/屬性/偽類
10標籤/偽元素
1萬用字元
0父子選擇器不一定要用標籤選擇器寫，只要父子關係成立就行
>
>
hotpinkspan
>
div>
>
blackpinkspan
>
>
>
>
imagedragonem
>
strong
>
div>
>
coldplayem
>
class
=>
class
="box"
>
>
sold outem
>
strong
>
div>
/* 父子選擇器 派生選擇器 */
/* 父子選擇器不一定要用標籤選擇器寫，只要父子關係成立就行 */
div span
div strong em
>
>
1em>
>
>
2em>
strong
>
div>
/* 父子選擇器不一定是直接的父子關係，間接的也可以 */
div em
>
>
1em>
>
>
2em>
strong
>
div>
/* 直接子元素選擇器 */
div > em
>
>
>
>
>
span
>
a>
p>
>
>
>
>
>
1em>
span
>
a>
li>
ul>
div>
>
>
>
2em>
p>
>
div>
a>
section
>
/* 瀏覽器從右向左遍歷父子關係 */
section div ul li a em
>
1div
>
class
="demo"
>
2div
>
class
="demo"
>
3p>
/* 並列選擇器:用多個限制條件選中乙個元素。注意：不加空格*/
div.demo
class
=>
class
="content"
>
class
="box"
id="only"
>
1em>
div>
div>
#only
*/.content em
em.box
class
="classdiv"
id="iddiv"
>
class
="classp"
id="idp"
>
1p>
div>
/* 只要寫在同一行的選擇器，將權重值相加 */
#iddiv p
/* id + 標籤: 100 + 1 = 101 */
.classdiv .classp
/* 類 + 類: 10 + 10 = 20 */
div .classp#idp
/* 標籤 + 類 + id = 1 + 10 + 100 = 111 */
/* 當權重相同時，後面的將會覆蓋前面的 */
div .classp#idp
/* 標籤 + 類 + id = 1 + 10 + 100 = 111 */
#iddiv p.classp
/* id + 標籤 + 類: 100 + 1 + 10 = 111 */
/* 在css**中,!important的權重是infinity,是乙個常數。infinity+1>infinity */
div#iddiv p.classp
/*標籤 + id + 標籤 + 類:1 + 100 + 1 + 10 = 112 */
div .classp#idp
/* 標籤 + 類 + id = 1 + 10 + 100 = 111 */
>
1em>
>
2strong
>
>
3span
>
/* 分組選擇器 */
em,strong,
span
class
="demo1"
>
1div
>
class
="demo2"
>
2div
>
/* 分組選擇器 */
/* .demo1
.demo2 */
.demo1,
.demo2
.demo1
.demo2
>
花都監獄div
>
>
>
花都監獄em
>
strong
>
div
strong
>
div>
div
strong
CSS選擇器權重計算
css各種選擇器的權重 1.id選擇器 100 2.類 屬性 偽類選擇器 10 3.元素 偽元素選擇器 1 4.其他選擇器 0 如果有兩個css樣式都作用於某元素，如 id link a href id 100 link 10 a 1 href 0 111 id link.active id 100...
CSS 選擇器權重計算規則
下面從網易 規範中摘抄的內容，學習他們確定選擇器等級的方式。最近看了 精通css 這部分內容應該是從2.3節摘抄來的。選擇器等級 a 行內樣式style。b id選擇器的數量。c 類 偽類和屬性選擇器的數量。d 型別選擇器和偽元素選擇器的數量。選擇器等級 a,b,c,d style 1,0,0,0 ...
css選擇器的權重計算
其實，css有自己的優先順序計算公式，而不僅僅是行間 內部 外部樣式 id class 元素。一 樣式型別 1 行間 2 內聯 3 外部 二 選擇器型別 1 id id 2 class class 3 標籤 p 4 通用 5 屬性 type text 6 偽類 hover 7 偽元素 first l...