層疊樣式表的權重 css解決樣式衝突，css選擇器

2021-10-12 12:33:04 字數 3047 閱讀 4106

層疊

宣告衝突：同乙個樣式多次用到同乙個元素上面

層疊：解決宣告衝突的過程，瀏覽器自動解決（權重比較）（需了解原理，才能寫好樣式表）

權重比較

比較重要性：由高到低

1）作者樣式表（你自己寫的css）中的 ！important 樣式(慎用，實際幾乎不會使用，層級太高，會影響後期維護修改)

div

2）作者樣式表的普通樣式（行間樣式表 > 內嵌樣式表 和 外聯樣式表；內嵌樣式表和外聯樣式表如果選擇器權重一樣；誰寫在下面誰優先順序高）

行間樣式表（解除安裝html元素後面的）；

內嵌樣式表（寫在html中的head元素內的，用包裹）；

外聯樣式表（單獨寫在外部的樣式表，以.css結尾，由link引入html）；

3）瀏覽器中的預設樣式（一般會用網路上寫好的樣式表初始化；normalize.css、reset.css、meyer.css）

比較特殊性：一般看來說，選擇器的選的越窄，權重越高

具體規則：有乙個四個數字（x x x x）的整體數字來比較優先順序，那個數字大優先順序就高（為了方便理解，可以暫時認為是乙個四位數的數字，但是不是十進位制的，粗略計算下式256進1；）

1）如果樣式表是寫在行間的話，第一位數字加1（1 0 0 0）

2)樣式表用了id選擇器(#id)的話，第二位數字加1（0 1 0 0），可以疊加；

3）樣式表用了類選擇器（.class）的話第三位數字加1（0 0 1 0），可以疊加；

4)樣式表用了元素選擇器（div）或著偽元素選擇器的話第四位數字加1（0 0 0 1），可疊加；

你叫權重，從左邊開始看，如果左邊第一位哪個大就展示哪個樣式，如果一樣的話就看第二個數字（切記不能十個進一），依此類推；如果都一樣的話則誰寫在下面展示誰的樣式

hello world
eg：顏色為blue的權重是（0 0 1 1）

顏色為green的權重是（0 1 1 0）

顏色為red的權重是（1 0 0 0）

從左邊開始比，red的權重最高，所以最終展示顏色為red

比較源次序

一句話：相同權重**寫在後面的優先順序高

e+f(三個條件下乙個為f的兄弟節點，如果下乙個不是f的話則無法選中)
e~f(節點下面所有為f兄弟節點)
e [attr~=『val』] (屬性包含val的節點(比如

,其中包含ab和abc))

>
e [attr|=『val』] (屬性以val-開頭的節點(比如

,其中包含ab和abc))

>


/*這樣會被選中


;這樣不會選中


*/
下面三個選擇器只有屬性的字串中包含即可（比如div data=『ab-abc』> 中data屬性包含a，b, -, c）

e [attr^=『val』] (屬性以val開頭的字串節點)

e [attr$=『val』] (屬性以val結尾的字串節點)

e [attr*=『val』] (屬性中有val的字串節點)

偽類選擇器(被選中元素的一種狀態)

e:placeholder(選擇input中的placeholder進行修改)

e:selection(對選中的元素修改進行修改)
lorem ipsum, dolor sit amet consectetur
e:not(除了什麼都選中)
:root根標籤選擇器，在html中相當於選擇html；如果後期出現別的根選擇器，則是別的根選擇器

e:target代表乙個唯一的頁面元素(目標元素)，其id 與當前url片段匹配 .

box1


box2


box1


box2


box3
e:first-child第乙個子元素為e的節點

e:last-child最後乙個個子元素為e的節點（body節點最後乙個子節點e元素無效）

e:only-child只有乙個個子元素為e的節點

e：nth-last-child(n)倒數第n個子元素

123


4  5


//只有134會變背景顏色
e:nth-child(n)第n個子元素為e的元素（css從1開始茶查數）；這裡會考慮其他元素的影響（會計算其他元素開始算）只有 < div >1< /div>受到div:nth-child(2)影響改變顏色（會受到span影響）
012


345
e:nth-of-type(n)第n個子元素為e的元素（css從1開始茶查數）；這裡不會考慮其他元素的影響；下面選的話只有 < div>1< /div> < div>2< /div>分別受到受到div:nth-nth-of-type(1) div:nth-nth-of-type(2)影響改變顏色（不會受到span影響）
012


345
e:first-of-type；e:last-of-type；e:only-of-type;e:nth-of-type(n);e:nth-of-last-type(n)(不受別的元素影響，別的和first-child一樣)

上面其中帶n的元素中，n+1相當於從1後面開始都選，(-n+3)選中前3個元素；2n+1/odd為奇數，2n/even為偶數(奇偶數這裡面n自然數從0開始查數)；

e:empty e元素節點中不能有節點（可以有注釋，但不能有換行符和空格）

e:checked 被選中的e節點（e節點一般為單選多選框）

e:enabled 可用的e節點 e:disabled不可用的e節點（e節點一般為input輸入框）

e:read-write ，修改可以寫的e節點元素；e:read-only選中唯讀節點，即e中有readonly屬性的e元素（e一般為input）

CSS層疊樣式表 定義樣式表

定義樣式表 1 html標記定義 p p可以叫做選擇器，定義那個標記中的內容執行其中的樣式 乙個選擇器可以控制若干個樣式屬性，他們之間需要用英語 隔開，最後乙個可以不應加 2 class定義 class定義是以 開始 p3 id 定義 id定義是 開始的 p4 優先順序問題 id class htm...

CSS層疊樣式表

一般說來所有樣式有下面的規則 第四個最有優先性 1 browser default 瀏覽器預設 2 external style sheet 外部樣式表 3 internal style sheet inside the 瀏覽器將從mystyle.css檔案中讀採樣式定義資訊，並根據它來格式化文件 ...

CSS（層疊樣式表）

一.css是增加html的樣式,擁有對網頁物件和模型樣式編輯的能力 1 在html中引入css有3種方式 1.外部樣式表 2.內部樣式表 3.內聯樣式表 2 css選擇元素的方式 1.元素選擇器 通過元素名字進行選擇 2.id選擇器 3.class選擇器 4.子元素選擇器 5.相鄰選擇器 如果需要選...