CSS學習筆記(二)選擇器

2021-07-10 23:38:50 字數 2776 閱讀 7318

css樣式宣告(定義)由兩部分組成:

選擇器選擇器作用:可以選出當前文件中的乙個或多個標籤,然後使用css屬性對這些標籤設定樣式。

標籤選擇器

標籤名

類(class)選擇器

.類選器名稱

注意:1、英文圓點開頭

2、其中類選器名稱可以任意起名(避免中文)

小栗子:

枯藤老樹昏鴉,小橋流水人家。古道西風瘦馬。夕陽西下,斷腸人在天涯。

id選擇器:(優先順序最高)

#id名稱

小栗子:

枯藤老樹昏鴉,小橋流水人家。古道西風瘦馬。夕陽西下,斷腸人在天涯。

id選擇器與類選擇器直觀上有許多相似點,但是它們的用法還是有區別的。

--id選擇器與類選擇器的不同點

1、當需要為乙個元素同時設多個樣式時,可以通過使用類選擇器詞列表方法來為乙個元素同時設定多個樣式。而不能用id選擇器(不能使用 id 詞列表)。

例如以下:同時應用了兩種樣式 mark 與 size

枯藤老樹昏鴉小橋流水人家古道西風瘦馬...

2、id選擇器只能在文件中使用一次,而類選擇器可以使用多次。與類選擇器不同,在乙個html文件中,id選擇器只能使用一次。

枯藤老樹昏鴉小橋流水人家古道西風瘦馬夕陽西下...

錯誤形式:

枯藤老樹昏鴉小橋流水人家古道西風瘦馬夕陽西下...

以上同乙個id選擇器使用了兩次,因此錯誤。

子物件選擇器:

.選擇器名稱》子元素標籤

eg:.p1>span

小栗子:

枯藤老樹昏鴉,小橋流水人家古道西風瘦馬,夕陽西下...

元素標籤 > 子元素標籤 

eg:      p >span 

小栗子:

枯藤老樹昏鴉,小橋流水人家古道西風瘦馬,夕陽西下...

標籤內的標籤巢狀的標籤字型顏色沒有與其他標籤內直接子標籤字型顏色一樣被應用了樣式(藍色),這是因為子選擇器僅僅作用於元素的第一代後代。

後代選擇器(包含選擇器): 

.選擇器名稱   後代元素標籤 

eg:.p1  span 

小栗子:

枯藤老樹昏鴉,小橋流水人家古道西風

瘦馬,夕陽西下...

元素標籤   後代元素標籤

eg:         p  span

小栗子:

枯藤老樹昏鴉,小橋流水人家古道西風

瘦馬,夕陽西下...

直觀上,子代與後代選擇器同樣有相似之處。但子選擇器作用於元素的第一代後代,後代選擇器作用於元素的所有後代。二者區別小栗子:

子代選擇器:

後代選擇器:

以上,h2定義了子代選擇器strong,h3定義了後代選擇器strong。子代選擇器僅僅對於直接自帶產生影響,因此,h2標籤中標籤內的strong標籤不受影響。而後代選擇器作用於所有元素後代,無論巢狀了多少層次,因此,h3標籤內的所有strong都被應用了樣式。

例子圖示:

萬用字元選擇器:

*

使用乙個(*)號指定,作用:匹配html中所有標籤元素。

分組選擇器:

標籤元素1,標籤元素2,...,

當想為html中多個標籤元素設定同乙個樣式時,可以使用分組選擇器。

結合其他選擇器的分組選擇器小栗子:

天淨沙 秋思

枯藤老樹昏鴉,小橋流水人家,古道西風瘦馬,夕陽西下,斷腸人在天涯

完。真的完了。。。

例子圖示:

CSS學習筆記 選擇器

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

css選擇器學習筆記

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

學習筆記 CSS選擇器

1 元素選擇器 1.id選擇器,2.類選擇器,3.標籤選擇器,4.萬用字元選擇器 2 關係選擇器 1.包含關係 e f e的所有f後代 2.子代選擇 e!important 內聯樣式 id 屬性 類 偽類 元素 偽元素 關係 萬用字元 繼承 瀏覽器預設屬性 內聯樣式 特殊性 1000 id 特殊性 ...