基礎選擇器
一、標籤選擇器
p h1 css不區分大小寫,建議小寫
1、所有的標籤都可以作為標籤選擇器去使用
2、無論這個標籤藏多深,一定能夠被選上
3、選擇頁面所有的,而不是具體某乙個;
標籤選擇器,選擇的是頁面上所有這種型別的標籤,所以經常描述「共性」,無法描述某乙個元素的「個性」的。
二、id選擇器
所有的標籤都可以有id屬性來標識標籤。
id屬性的值:
1)只能是數字字母下劃線,必須以字母開頭 ,不能和標籤同名。
2)乙個頁面中不能出現相同的id,哪怕他們不是乙個型別。
具有唯一性
id的優先順序大於class
三、類選擇器
.就是類的符號。類的英語叫做class,任何標籤都可以有class屬性
1)class屬性是可以重複的,2)同乙個標籤可以同時屬於多個類選擇器,切記,乙個標籤內不能出現兩個同名屬性
1、在開發時,盡量不要去試圖用乙個類名,把某個標籤的所有樣式寫完。這個標籤要多攜帶幾個類,共同造成這個標籤的樣式。
2、 每乙個類要盡可能小,有「公共」的概念,能夠讓更多的標籤使用。
到底用id還是用class?
答案:盡可能的用class,除非極特殊的情況可以用id。
原因:id是js用的。也就是說,js要通過id屬性得到標籤,所以我們css層面盡量不用id,要不然js就很彆扭。另一層面,我們會認為乙個有id的元素,有動態效果。
css高階選擇器
一、後代選擇器
空格就表示後代,如:div1 p{}選中div1的後代所有的p。
強調一下,選擇的是後代不一定是兒子。
後代選擇器就是一種平衡:共性、特性的平衡,共性中的特性。當要設定某一部分整體樣式時,可以使用後代選擇器。
後代選擇器描述的是祖先結構
二、交集選擇器
h3.special
ul li:last-child
七、下乙個兄弟選擇器
ie7開始相容,ie6不相容
+表示選擇下乙個兄弟
h3+p
選擇上的是h3元素後面緊挨著的第乙個兄弟。
選擇器可以組合使用。
繼承性當給自己設定樣式時,自己的後代都繼承上了,這個就是繼承性
哪些屬效能繼承?
color、 text-開頭的、line-開頭的、font-開頭的。
這些關於文字樣式的,都能夠繼承;所有關於盒子的、定位的、布局的屬性都不能繼承。
繼承性是從自己開始,直到最小的元素。
層疊性層疊性就是css處理衝突的能力。所有的權重計算,沒有任何相容問題!
當選擇器,選擇上了某個元素的時候,那麼要這麼統計權重:
id的數量,類的數量,標籤的數量
百位 十位 個位
不進製,實際上能進製(255個標籤等於乙個類名)但沒有實際意義!
當權重相同時,誰在後以誰為準。
如果不能直接選中某個元素,通過繼承的,權重值為0,
如果權重值都為0時,也就是繼承來的,那麼就按就近原則,誰描述的近,聽誰的。 並集選擇器權重要拆開計算,
權重問題大總結:
1) 先看有沒有選中,如果選中了,那麼以(id數,類數,標籤數)來計權重。誰大聽誰的。如果都一樣,聽後寫的為準。
2) 如果沒有選中,那麼權重是0。如果大家都是0,就近原則。
權重問題深入
一、乙個標記可以攜帶多個類名,標籤樣式並不是和類名順序有關,而是和css樣式書寫順序有關、
二、!important標記
1)!important是給標記屬性新增權重,(無窮大)
font-size:60px!important;
注意:增加的屬性的權重值,而不是選擇器、
2)無法提公升繼承的權重
3)!important不影響就近原則
如果大家都是繼承來的,按理說應該按照「就近原則」,那麼important能否影響就近原則呢?
答案是:不影響。遠的,永遠是遠的。不能給遠的寫乙個important,乾掉近的。
三、權重問題總結
CSS選擇器權重問題
原則一 繼承不如指定 原則二 id class 標籤選擇符 原則三 越具體越強大 原則四 標籤 id id 標籤.class class css優先順序包含四個級別 標籤內選擇符,id選擇符,class選擇符,元素選擇符 以及各級別出現的次數 根據這四個級別出現的次數計算得到css的優先順序。css...
css選擇器權重介紹
選擇器與偽元素的權重情況 高權重的選擇會覆蓋低權重的展示樣式 選擇器表示式或示例 說明權重 行內選擇器 style 1000 id選擇器 aaa 100類選擇器 aaa 10標籤選擇器 h1元素的tagname 1屬性選擇器 img alt div class pus 10相鄰選擇器 selecte...
CSS選擇器,深入理解CSS選擇器權重
前端工程師經常和選擇器權重打交道,但是部分人還是一知半解,下面咱們一起學習一下吧。類選擇器 active 標籤選擇器 div 屬性選擇器 img alt 通用選擇器 選擇器權重 這裡的 權 和是數學中加權平均數的 權 乙個意思。當同時多個css選擇器語句的目標是同乙個html元素時,選擇器權重就派上...