CSS選擇器總結

2021-08-02 00:01:54 字數 1765 閱讀 4827

定義: 實現css對html頁面樣式的控制,如果要讓這些樣式對html頁面中的元素實現一對一,一對多或者多對一的控制,這就需要用到css選擇器,html頁面中的元素就是通過css選擇器進行控制的。

標籤選擇器

類選擇器

id選擇器

萬用字元選擇器

標籤指定式選擇器

後代選擇器

並集選擇器

定義:標籤選擇器其實就是html**中的標籤。

html中標籤: 「html、body、hn、p、img」等等。

語法: html標籤

作用:將頁面中對應的html標籤選中,並設定樣式。

定義:類選擇器,是對html標籤中class屬性進行選擇。css類選擇器的選擇符是 「.「,類選擇器在css樣式編碼中是最常用到的。

語法: .自定義類名

特點:

1. 類選擇器可以被多個標籤同時呼叫

2. 乙個標籤可以同時呼叫多個類樣式(乙個標籤可以有多個類名)

類選擇器命名規範:

1. 單詞和數字組合可以命名

2. 不能以純數字或純數字開頭定義類名

3. 不推薦使用漢字定義類名

4. 不能以特殊字元或特殊字元開頭定義類名(」_」除外)

定義:id選擇器和類選擇器用法一樣,區別是同乙個html頁面中不能有相同的id名稱(使用多個相同的id選擇器,瀏覽器不會報錯但是不符合w3c標準了,所以id選擇器命名必須要唯一性)。id選擇器以 「#」 來定義。

語法: #自定義id名稱

id選擇器與類選擇器的區別:

1. 在頁面中標籤的id值必須唯一,相當於人的身份證。類選擇器相當於人的姓名,可以有很多人使用同乙個姓名,比如張三。

2. 在頁面中乙個標籤只能呼叫乙個id樣式

定義:萬用字元選擇器用「*」號表示,他是所有選擇器中作用範圍最廣的,能匹配頁面中所有的元素。

語法:*

font-size:設定字型大小

font-weight:設定文字是否加粗顯示 推薦使用具體數字700

font-style:設定文字是否斜體顯示,normal | italic (斜體顯示)

font-family:設定文字字型

text-align:文字居中格式,center |left|right

定義:標籤指定式選擇器又稱交集選擇器,由兩個選擇器構成,其中第乙個為標記選擇器,第二個為class選擇器或id選擇器,兩個選擇器之間不能有空格

語法:html標籤.選擇器名

定義:後代選擇器用來選擇元素或元素組的後代,其寫法就是把外層標記寫在前面,內層標記寫在後面,中間用空格分隔。當標記發生巢狀時,內層標記就成為外層標記的後代。

語法:選擇器 選擇器

特點:

1. 後代選擇器中,標籤之間的關係屬於巢狀關係。

2. 選擇器與選擇器之間必須有空格

定義:並集選擇器是各個選擇器通過逗號連線而成的,任何形式的選擇器(包括標記選擇器、class類選擇器、id選擇器等),都可以作為並集選擇器的一部分。如果某些選擇器定義的樣式完全相同,或部分相同,就可以利用並集選擇器為它們定義相同的css樣式。

語法: 選擇器,選擇器

css選擇器 CSS選擇器總結

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

CSS總結 CSS選擇器

css3選擇器最新部分,有人也稱這種選擇器為css3結構類,下面我們通過實際的應用來具體了解他們的使用和區別,首先列出他具有的選擇方法 first child選擇某個元素的第乙個子元素 last child選擇某個元素的最後乙個子元素 nth child 選擇某個元素的乙個或多個特定的子元素 nth...

CSS選擇器總結

通用選擇器 選擇所有元素 css2 型別選擇器 element 根據型別選擇元素 css1 類選擇器 class 根據全域性屬性class的值選擇元素 css1 id選擇器 id 根據全域性屬性id的值選擇元素 css1 屬性選擇器 attr 基於屬性選擇元素 css2 attr val 選擇定義a...