CSS常用選擇器簡單記憶理解

2021-10-06 15:15:11 字數 2559 閱讀 4532

就是直接選擇相同的標籤進行屬性設定(比如body,div,p,ul,li),例:

hello world!

這個段落採用css樣式化。

css 中 id 選擇器以 「#」 來定義,html元素以id屬性來設定id選擇器。就是說,css會選擇html中id同名的字進行屬性設定。例:

"para1">hello world!

這個段落不受該樣式的影響。

class 選擇器用於描述一組元素的樣式,可以在多個元素中使用。類選擇器以乙個點"."號顯示,例:

"center">這個段落居中對齊。

只有乙個 * ,通常用來初始化,例:

"center">這個段落居中對齊。

css偽類是用來新增一些選擇器的特殊效果。偽類選擇器分為結構性、子元素、 ui、動態和其它偽類選擇器。主要用到「 : 」

:root

根元素選擇器,選擇文件中的根元素

:first - child

子元素選擇器,選擇元素中第乙個子元素

:last-child

子元素選擇器,選擇元素中最後乙個子元素

:only-child

子元素選擇器,選擇元素中唯一子元素

:only-of- type

子元素選擇器,選擇指定型別的唯一子 元素

:nth-child(n)

子元素選擇器,選擇指定n個子元素

: enabled

ui選擇器,選擇啟用狀態的元素

:disabled

ui選擇器,選擇禁用狀態的元素

: checked

ui選擇器,選擇被選中input勾選元素

:default

ui選擇器,選擇預設元素

:valid

ui選擇器,驗證有效選擇input 元素

:invalid

ui選擇器,驗證無效選擇input元素

:required

ui選擇器,有required屬性選擇元素

:optional

ui選擇器,無required屬性選擇元素

:link

動態選擇器,未訪問的超連結元素

:visited

動態選擇器,已訪問的超連結元素

: hover

動態選擇器,懸停在超連結上的元素

:active

動態選擇器,啟用超連結上的元素

: foucs

動態選擇器,獲取焦點的元素

:not

其他選擇器,否定選擇的元素

:empty

其他選擇器,選擇沒有任何內容的元素

:lang

其他選擇器,選取包含lang屬性的元素

:target

其他選擇器,選取url片段標識指向元素

css中有如下四種偽元素選擇器:

1)::first-line 	為某個元素的第一行文字使用樣式;

2)::first-letter 為某個元素中的文字的首字母或第乙個字使用樣式;

3)::before 在某個元素之前插入一些內容;

4)::after 在某個元素之後插入一些內容;

(偽元素選擇器和偽類選擇器還是有點分不清。。)

關係選擇器就包括後代選擇器、子選擇器、相鄰同胞選擇器、同胞選擇器。

後代選擇器

當元素b嵌在元素a內部時,b就是a的後代。定義後代選擇器時,外層的元素寫在前面,內層的元素寫在後面,中間用空格分隔。例:

子選擇器選擇所有作為e元素的直接子元素f,對更深一層的元素不起作用,用》表示。例:

子選擇器"#">子元素1

"#">孫元素

"#">子元素2

相鄰同胞選擇器相鄰同胞選擇器語法:e + f,選擇緊跟在某個元素的後面,且具有相同父親的元素。

同胞選擇器

同胞選擇器語法:e~f,用於選擇某元素後面的所有同胞元素。

css選擇器(全)

簡單理解css之選擇器

下文中attribute代表屬性,value代表值,tag代表標籤 id id為 exp 中的p標籤的字型顏色為紅色 exp p header 類名為 header 的p標籤顏色為紅色 header p 標籤p並且類名為header的字型顏色為紅色 這種方法同樣適用於id選擇器 p.header a...

CSS常用選擇器

class 選擇器 選擇並設定 class intro 的元素的樣式 intro id選擇器 為 id firstname 的元素設定樣式 firstname 標籤選擇器 選擇並設定所有 元素的樣式 p並集選擇器 使用 逗號 連線兩個選擇器 選擇並設定所有 樣式和所有 元素的樣式 h1,p 後代選擇...

CSS 常用選擇器

選擇器是指通過一定的語法規則選取到對應的html標記,然後給這個對應的html標記設定樣式 1.標籤選擇器 寫法 標籤名 標籤選擇器影響範圍大,一般用來做一些通用設定,或用在層級選擇器中。舉例 div 這是第乙個div 這是第二個div 2.類選擇器 寫法 類名 通過類名來選擇元素,乙個類可應用於多...