拉勾教育css學習筆記3 6 css選擇器以及屬性

2021-10-21 06:57:20 字數 2153 閱讀 2201

選擇器:選擇要新增樣式的html標籤的一種方法、模式。

將學習css2.1的七種選擇器:

基礎選擇器:標籤選擇器、id選擇器、類選擇器、萬用字元選擇器。

高階選擇器:後代選擇器,交集選擇器,並集選擇器。

書寫方式:通過同名的標籤名進行選擇。

注意:標籤選擇器可以選擇所有的同名標籤,會忽視http巢狀關係,不管巢狀多深都會被選中。

優點:可以選中所有的同名標籤,效率高。

缺點:只能實現全選,不能對區域性進行選擇。

通過標籤上的id屬性去選擇標籤,解決標籤選擇器全選的缺點,但單選同時是id選擇器的缺點

書寫方式:**#**id屬性值

注意:只能選中乙個標籤,和其id屬性值,注意id的命名規則:必須以字母開頭,後面可以有字母數字,下劃線橫線。區分大小寫,每個id屬性值必須是唯一的,不能和其他的id重名。

通過class屬性去選擇標籤

書寫方式:.class(.屬性值)

選擇範圍:頁面中所有class屬性值相同的標籤。注意class命名規則:字母開頭後面可以有字母,數字,下劃線,橫線。嚴格區分大小寫,class屬性可以和其他的class相同。

注意:類名可以重複,而且乙個標籤可有多個類名,如:

class

="demo ps"

>

aiudhuihap

>

然後通過css的兩個.demo .ps格式去改變其樣式即可。

類選擇器特殊應用:在css中提前設定一些類名,每個類選擇器後面只新增一條css樣式屬性。

這些屬性在頁面中會被常用。這樣後期不需要多次出現屬性,每當有需求的時候給類名新增相應的標籤。

星號:*

優點:可以實現全選

缺點:選擇效率低,會讓某些不需要載入的標籤也載入,導致瀏覽器資源浪費。

通過標籤之間存在的巢狀關係去選擇元素,基本組成部分是基礎選擇器

也叫做包含選擇器

書寫方式:空格表示後代,基礎選擇器中間使用空格分隔,空格前面的選擇器選中的標籤必須是後面選擇器選中標籤的祖先級

通過乙個標籤之上,滿足所有的基礎選擇器的需求去選擇標籤。

書寫方式:基礎選擇器進行連續書寫,如果有標籤選擇器參與交集,必須書寫在開頭。

比較常見的標籤和類的交集

p.demo

如上就是標籤和類的交集選擇器,標籤寫在前面。

注意:ie6以下不相容。

所有單獨選擇器選中的標籤的並集集合

書寫方式:將多個選擇器中間用逗號進行分隔,注意最後乙個不能寫逗號。

h2,p,.demo

將兩個選擇器合併,節省**量。

繼承性的應用:可以將頁面中最多的文字樣式設定給乙個較大的祖先比如,後期的後代標籤可以進行繼承,節省**量

同型別樣式屬性共同載入時,會觸發層疊性,即只執行乙個樣式

選中目標標籤層疊方式:

根據基礎選擇器的權重,權重高的層疊權重低的,選擇範圍越大,權重越小。

高階選擇器的比較方法,依次比較組成高階選擇器的id個數,類個數,標籤個數(根據選擇範圍)如果前面能比較出大小就不比較後面,如果前面相等就繼續比較,直到得出結果為止。

如果選擇器權重都相同,那麼有個就近原則,需要比較css**中的書寫順序。

祖先級的層疊方式

如果選擇器選中的是祖先元素,文字的樣式可以被繼承。

以較就近原則,近的層疊遠的,即優先繼承父類,然後是祖父類...

以較就近原則。

如果權重相同,比較css書寫順序,後面層疊前面的

important關鍵字

如果在比較選擇器權重的過程中,遇見乙個!important關鍵字,可以將某條css樣式出現的權 重提公升到最大

書寫位置:在某個css屬性的屬性值後面空格加!important.

注意:就近原則中不能加!important,會失效。

行內式

高於所有的其他選擇器,但是低於important

拉勾教育CSS學習筆記3 5

今明兩天將對css層疊樣式表 cascading style sheets 進行乙個初步的學習和認識,3月5日主要學習了樣式表的集中程式設計方式,語法規則以及常用屬性,3月6日將學習css的幾個重要的選擇器以及繼承性和層疊性。css規則主要由兩個主要的部分組成 選擇器,以及一條或多條宣告 p p 選...

CSS學習筆記 選擇器

用過css的同志們都知道,選擇器是非常重要的,如果選擇器使用不當,即使你的css寫的再好,但是不知道要用在哪個元素上,這不是英雄無用武之地嗎?css,用過的都說好!最基本的選擇器,id選擇器,類選擇器這些大家早已心知肚明的就不在這裡贅述了,有那功夫趕緊研究一下把妹攻略 link,visited被稱為...

css選擇器學習筆記

概念 層疊樣式表 同乙個樣式都作用於同乙個元素 設定網頁外觀 注意 如果同乙個樣式同時作用於同乙個元素,最終樣式決定於樣式的優先順序 css選擇器 可以使css樣式與元素進行分離 作用 減少 冗餘 方便後期維護 語法 選擇器 注意 符號都是英文的,符號必須寫 行間樣式 語法 標籤名 style 樣式...