關於css選擇器的總結

關於css選擇器的總結

css選擇器大體上可以分為三種分別是：簡單選擇器、屬性選擇器還有偽類選擇器。

（一）簡單選擇器中可以通過三種分類：id、class、type，這三種選擇器分別是按重要性遞減來排序，id選擇器可以視為身份證，class和type都可以當成分類，這就說明id可以當成唯一識別符號，id用#來開始展示樣式表。

在相同的分量時：在相同規則時，後載入的會覆蓋先載入的規則

。（二）屬性選擇器是指根據元素屬性的取值來進行屬性選擇，以下是幾個常見的語法和相應的使用說明

1. 基本語法

2.1.1e [ attr ]

2.1.2e [ attr = value ]

2.1.3e [ attr ~= value ]

2.1.4e [ attr |= value ]

2.1.5e [ attr $= value ]

2. 使用說明

2.2.1選擇具有 attr 屬性的 e

2.2.2選擇具有 attr 屬性且屬性值等於 value 的 e

2.2.3選擇具有 attr 屬性且屬性值為一用空格分隔的字詞列表，其中乙個等於 value 的 e 。這裡的 value 不能包含空格

2.2.4選擇具有 attr 屬性且屬性值為一用連字元分隔的字詞列表，由 value 開始的 e

2.2.5選擇具有 attr 屬性且屬性值為va

lue結尾的元素

（三）偽類選擇器包含：ui元素狀態偽類、結構性偽類和目標偽類還有否定偽類

ui元素狀態偽類：

e:checked： 是指匹配所有使用者介面（form表單）中處於選中狀態的元素e

e:enabled： 是指匹配所有使用者介面（form表單）中處於可用狀態的e元素

e:disabled： 是指匹配所有使用者介面（form表單）中處於不可用狀態的e元素

e::selection： 是指匹配e元素中被使用者選中或處於高亮狀態的部分

結構性偽類：（由於結構性偽模擬較多，這裡只是描寫其中比較常見的）

e:last-child： 是指匹配父元素中最後乙個e元素（同理first-child）

e:nth-child(n)： 是指匹配父元素中的第n個子元素e

e:empty： 是指匹配沒有任何子元素（包括text節點）的元素e

e:root： 是指匹配文件的根元素。在html中，根元素永遠是html

注：由於是剛開始學習，**寫的不好或者寫錯了，還請各位看官老爺多多包涵，能提點斧正我的錯誤。

css選擇器 CSS選擇器總結

在前不久的專案中，實習小妹妹在乙個全域性的樣式中使用了下面這個css選擇器 content 對應的html結構大致是 實習妹子大致的意思是想要讓content下的子元素div的高度100 但是貌似她沒有真正理解first child的意義，從而導致這個全域性的樣式讓 所有頁面都出現了問題，然後我就只...

關於CSS選擇器的使用總結

關於css選擇器的使用，一共可以分為3種 1 標籤選擇器 根據標籤名匹配所有的該元素 2 id選擇器 根據元素的 id 屬性值匹配文件中惟一的元素，id具有唯一性，不能重複使用 3 class選擇器 在使用上通俗一點說，如果想讓某個標籤在頁面中統一具有某種樣式，使用標籤選擇器比較合適。如果乙個標籤想...

關於CSS選擇器

通用選擇器 這個選擇器不經常用，看著省事，問題也有。標籤選擇器 html標籤都可以進行設定，但是常用的如ul，li，a標籤等最好還是給乙個class或者id，乙個頁面中如果有多個相同標籤，容易混淆。類選擇器 類選擇器用得比較多，也比較方便。同乙個類名可以賦給多個標籤，同樣設定了樣式也可以進行重複使用...