基礎選擇器

一、標簽選擇器

p{。。。}? h1{…..}?? css不區(qū)分大小寫，建議小寫

1、所有的標簽都可以作為標簽選擇器去使用

2、無論這個標簽藏多深，一定能夠被選上

3、選擇頁面所有的，而不是具體某一個；

標簽選擇器，選擇的是頁面上所有這種類型的標簽，所以經常描述“共性”，無法描述某一個元素的“個性”的。?

?

二、id選擇器

所有的標簽都可以有id屬性來標識標簽。

Id屬性的值：

1）只能是數字字母下劃線，必須以字母開頭 ，不能和標簽同名。

2）一個頁面中不能出現相同的id，哪怕他們不是一個類型。

具有唯一性

?

id的優(yōu)先級大于class

三、類選擇器

.就是類的符號。類的英語叫做class，任何標簽都可以有class屬性

1）class屬性是可以重復的，2）同一個標簽可以同時屬于多個類選擇器，切記，一個標簽內不能出現兩個同名屬性

1、在開發(fā)時，盡量不要去試圖用一個類名，把某個標簽的所有樣式寫完。這個標簽要多攜帶幾個類，共同造成這個標簽的樣式。

2、 每一個類要盡可能小，有“公共”的概念，能夠讓更多的標簽使用。

?

到底用id還是用class？

答案：盡可能的用class，除非極特殊的情況可以用id。

原因：id是js用的。也就是說，js要通過id屬性得到標簽，所以我們css層面盡量不用id，要不然js就很別扭。另一層面，我們會認為一個有id的元素，有動態(tài)效果。

?

Css高級選擇器

一、后代選擇器

空格就表示后代，如：div1 p{}選中div1的后代所有的p。

強調一下，選擇的是后代不一定是兒子。

后代選擇器就是一種平衡：共性、特性的平衡，共性中的特性。當要設置某一部分整體樣式時，可以使用后代選擇器。

后代選擇器描述的是祖先結構

?

二、交集選擇器

h3.special{

??? color:red;

}

選擇的元素是同時滿足兩個條件：必須是h3標簽，然后是special。

一般標簽放在前面。交集選擇器沒有空格。

三、并集選擇器（分組選擇器）

用逗號表示并集。

例：h3,li{

???? color:red;

}

四、通配符*

*就表示所有元素。效率不高，盡量要少用

?

五、兒子選擇器

IE7開始兼容，IE6不兼容

>號

六、序選擇器

IE8開始兼容；IE6，7不兼容

序選擇器指first-child和last-child

ul li:first-child{

??????? color:red;

??????? }

ul li:last-child{

???????????? color:blue; ? }

七、下一個兄弟選擇器

IE7開始兼容，IE6不兼容

+表示選擇下一個兄弟

h3+p{

????? color:red;

??? }

選擇上的是h3元素后面緊挨著的第一個兄弟。

?

選擇器可以組合使用。

?

?

繼承性

當給自己設置樣式時，自己的后代都繼承上了，這個就是繼承性

哪些屬性能繼承？

color、 text-開頭的、line-開頭的、font-開頭的。

這些關于文字樣式的，都能夠繼承；所有關于盒子的、定位的、布局的屬性都不能繼承。

繼承性是從自己開始，直到最小的元素。

層疊性

層疊性就是css處理沖突的能力。所有的權重計算，沒有任何兼容問題！

?

當選擇器，選擇上了某個元素的時候，那么要這么統(tǒng)計權重：

id的數量，類的數量，標簽的數量

百位???????????? 十位??????????????????? 個位

不進位，實際上能進位（255個標簽等于一個類名）但沒有實際意義！

當權重相同時，誰在后以誰為準。

如果不能直接選中某個元素，通過繼承的，權重值為0，

如果權重值都為0時，也就是繼承來的，那么就按就近原則，誰描述的近，聽誰的。???????????? 并集選擇器權重要拆開計算，

?

權重問題大總結：

1） 先看有沒有選中，如果選中了，那么以（id數，類數，標簽數）來計權重。誰大聽誰的。如果都一樣，聽后寫的為準。

2） 如果沒有選中，那么權重是0。如果大家都是0，就近原則。

?

權重問題深入

一、一個標記可以攜帶多個類名，標簽樣式并不是和類名順序有關，而是和css樣式書寫順序有關、

二、！important標記

1）！important是給標記屬性添加權重，（無窮大）

font-size:60px !important;

注意：增加的屬性的權重值，而不是選擇器、

2）無法提升繼承的權重

3）!important不影響就近原則

如果大家都是繼承來的，按理說應該按照“就近原則”，那么important能否影響就近原則呢？

答案是：不影響。遠的，永遠是遠的。不能給遠的寫一個important，干掉近的。

?

三、權重問題總結

轉載于:https://www.cnblogs.com/ljxblog/p/5689541.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的css选择器、权重的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。