css元素樣式確定

2022-07-26 17:51:12 字數 842 閱讀 4399

話說,有這麼一天,晨起,天氣尚好,於是想著整理一下網頁**,都說減小網頁**量對於提速那是相當有效滴呀,看了看css**頁,心想,這些選擇器這麼明顯的標著class,id~相信如此帥氣聰明的瀏覽器君應該會明白我的,乾脆把字首全部刪去吧,免得看著不美觀~哈,突然覺得我特聰明,不過~結果讓我徹底凌亂了~這頁面被毀得,面目全非了,介個是為那般捏~好吧,回歸主題:

對於css選擇器,瀏覽器君並非一眼望去,直接匹配的,因為層疊,嚴謹的它怎會如此草率呢,對於元素樣式的確定,往往要在多個樣式之間進行權衡,css通過層疊處理規則之間的衝突,層疊就是給每規則確定乙個重要度:

標有!important的使用者樣式 > 標有!important的網頁製作者的樣式 > 網頁製作者樣式 > 使用者樣式 > 瀏覽器樣式。

接下來就是對選擇器特殊性的判斷了,特殊性強的選擇器樣式優於特殊性相對弱的選擇器樣式,同等特殊性的選擇器樣式,後定義的樣式優先。

那特殊性如何確定呢?選擇器特殊性分為4個等級,我們可以把它設為a,b,c,d,並把它們這樣連起來:abcd,值大的特殊性大。

a—該元素為行內樣式時,a=1,否則a=0;

b—b為id選擇器的總數;

c—c為類,偽類,屬性選擇器的個數;

d—的為型別選擇器,偽元素選擇器的個數;

現在總算明白為何瀏覽器君不懂我的心了,如果將某個規則應用於乙個元素而不發生效果,很有可能就是特殊性問題哦,這時應該考慮是否文件其他地方使用了更特殊的選擇器,不要急急忙忙的將它定義為bug哦,可以試著在該選擇器前加上父級的class、id,讓該選擇器更特殊,瀏覽器君會明白的~

哦,忘了還有一點要注意的,瀏覽器君對於選擇器的匹配是至右向左的,所以不要盲目的加一大堆父級class,父級的父級class......剛剛好就好~

JQ jQuery改變css偽元素樣式

偽元素是什麼?例如 bofore after 偽元素不是dom,不能直接操作。若有以下html和css,通過操作偽元素改變圖示顏色 glyphicon number before有兩種方法實現 1 通過新增class的方法實現 對於本例子,適用於改變的顏色已知的情況下 table container...

獲取元素css樣式的方法

getcomputedstyle 元素 屬性名 ie不相容 currentstyle 只有ie相容 function getcss curele,attr else function getcss curele,attr catch e box style width 800px div let b...

用JS改變的元素CSS樣式

css樣式的引用有3種方式 style引用 class引用 id引用,所以js改變元素的樣式我們也分3種來說。1.js改變由style方式引用的樣式 方法一 document.divs.style.csstext border 1px solid 000000 color ff0000 方法二 do...