選擇器知識

2021-09-25 09:35:38 字數 819 閱讀 2827

一、選擇器

1、我們把css樣式寫在style屬性裡的做法叫做行間樣式表,該方法設定的樣式只對當前元素有效(現在已經很少使用)

2、 在head裡設定乙個style標籤,用選擇器和樣式的寫法叫做內部樣式表,該方法對當前頁面有效(適量使用)

3、 *(通配選擇器):獲取所有子元素;型別選擇器(如:div):獲取所有該種元素;類名選擇器(.加上class屬性的值):獲取所有具有該類名的元素;id選擇器(#加上id屬性的值):獲取具有該id值的元素

4、特殊用法:包含選擇器(如#id .class)——獲取範圍內第一種選擇器後代中第二種選擇器選中的元素

二、選擇器的優先順序:

&&: 行間樣式(雖然行間樣式不是選擇器)>id選擇器》class選擇器》型別選擇器》通配選擇器

&&: 包含選擇器層級較多時,可以約分包含選擇器:如#id .class的優先順序高於#id; #id .class與.class #id的優先順序相同

如果多個選擇器優先順序一致:後面覆蓋前面

三、選擇器擴充套件

四、 偽類選擇器:

1、 a:link—選擇所有未被訪問的鏈結。

2、a:visited—選擇所有已被訪問的鏈結。

3、a:hover—選擇滑鼠指標位於其上的鏈結。

4、a:active—選擇活動鏈結。(正在擊中)

5、p:before—在每個 p 元素的內容之前插入內容。

6、 p:after—在每個 p 元素的內容之後插入內容。

注意: a的4個偽類必須按照lvha的順序書寫,否則可能會出錯;before和after中必須設定content(內容)和display(種類)兩個樣式,否則無法正確顯示

選擇器知識點

一 選擇器 1 屬性選擇器 e attr 表示存在attr屬性即可 e attr val 表示屬性值完全等於val e attr val 表示在屬性值的 任意 位置包含val字元 e attr val 表示在屬性值的 開始 位置包含val字元 e attr val 表示在屬性值的 結束 位置包含va...

css知識總結 選擇器

css選擇器規定了css規則用於那些元素上 選擇器示例 示例說明 通用元素選擇器,匹配所有的元素。class info 類選擇器,匹配所有class屬性值中包含info的元素。element p標籤選擇器。匹配p標籤。id info id選擇器,匹配id屬性為 info的元素。選擇器示例 示例說明 ...

選擇器基本知識

一.萬用字元選擇器 也叫子字串選擇器 所有 開頭 結尾包 含 預設 加 d ata code kk d ata code 結尾 包含 預設加 data code kk data code 結尾包含 默 認加 data cod e k k data cod e kk data code kk data...