CSS標籤選擇器

2021-08-03 08:39:30 字數 2984 閱讀 6744

1.什麼是標籤選擇器?

作用:根據指定的標籤名,在當前介面中找到所有該名稱的標籤,然後設定屬性。

格式:標籤名{

屬性:值;

注意點:

1. 標籤選擇器選定的是當前介面中所有該名稱的標籤,而不能單獨選定某一標籤;

2. 標籤選擇器無論標籤藏得多深都能找到;

3. 只要是html中的標籤都可以作為標籤選擇器。

2.id選擇器

作用:根據指定的id名稱找到對應的標籤,然後設定屬性。

格式:#id{

屬性:值;

注意點:

1. 每乙個html標籤都有id屬性,也就是說每個標籤都可以設定id;

2. 在同乙個介面中id是不可重複的;

3. 在編寫id選擇器的時候id前一定要加#;

4. id的名稱是有一定的規範的。

4.1 id的名稱只能有字母、數字、下劃線組成;

4.2 id名不能以數字開頭;

4.3 id名不能是關鍵字;

4.4 在企業開發中一般如果僅僅是為了設定樣式,我們不會使用id,應為id是為了給js使用的。

3.類選擇器

作用:根據指定的類名稱找到對應的標籤,然後設定屬性。

格式:.類名{

屬性:值;

注意點:

1. 每乙個html標籤都有class屬性,也就是說每個標籤都可以設定class;

2. 在同乙個介面中class是不可重複的;

3. 在編寫id選擇器的時候class前一定要加.;

4. 類名的命名規範和id命名規範是一樣的;

5. 類名就是專門給某個特定的標籤設定樣式的;

6. 在html中每個標籤都可以同時繫結多個類名。

格式:《標籤名稱 class="類名1 類名2 ...">

特別註解:

一、id和class的區別

1.1 

id相當於身份證,不可重複;

class相當於姓名,可以重複。

1.2乙個html標籤只能繫結乙個id屬性

乙個html標籤可以繫結多個class屬性

二、id選擇器和class選擇器的區別?

id選擇器以#開頭

class選擇器以.開頭

三、在企業開發中到底使用id選擇器還是使用class選擇器?

id一般情況下是給js使用的,所以除非特殊情況,否則不要用id去設定樣式。

四、在企業開發中,乙個開發人員對類的使用可以看出開發人員的水平如何。

一般情況下在企業開發中要注意**的冗餘**的抽取,可以將一些公共的**抽取到乙個類選擇器中。

然後讓標籤和類選擇器繫結即可。

4. 後代選擇器

作用:找到指定標籤的所有後代標籤,設定屬性。

格式:標籤名稱1 標籤名稱2{

屬性:值;

先找名稱是標籤名稱1的標籤,然後在這個標籤下面找到名稱是標籤名稱2的標籤,然後再設定屬性。

5. 子元素選擇器

作用:找到指定標籤的所有特定直接子元素,設定屬性。

格式:標籤名稱1>標籤名稱2{

屬性:值;

注意點:

5.1 子元素選擇器只查詢兒子,不查詢其他巢狀的標籤;

5.2 子元素選擇器兩個標籤之間使用》來連線;

5.3 子元素選擇器不僅可以使用標籤,還可以使用其他選擇器;

5.4 子元素選擇器可以通過》一直延續下去。

特別註解:

一、後代選擇器和子元素選擇器的區別?

1. 1

後代選擇器用空格連線;

子元素選擇器用》連線。

1.2 

後代選擇器會指定後代標籤中所有的特定後代標籤;

子元素選擇器只會選中指定標籤中所有直接的子元素。

二、 後代選擇器和子元素選擇器的相同點?

2.1 子元素選擇器和後代選擇器都可以使用 標籤名、類名、id名稱來作為選擇器;

2.2 後代選擇器和子元素選擇器都可以通過空格和》一直延續下去。

6. 並集選擇器

作用:給所有選擇器選中的標籤設定屬性。

格式:選擇器1,選擇器2{

屬性:值;

7. 兄弟選擇器

7.1 相鄰兄弟選擇器

作用:給指定的選擇器後面緊跟的選擇器中的標籤設定屬性。

格式:選擇器1+選擇器2{

屬性:值;

注意點:

1. 兩個兄弟必須有相同的父元素

2. 相鄰兄弟選擇器必須用+連線;

3. 相鄰兄弟選擇器只能選中緊跟其後的那個標籤,不能選中被隔開的標籤。

7.2 通用兄弟選擇器

作用: 給指定選擇器後面所有的選擇器中的標籤設定屬性。

格式:選擇器1~選擇器2{

屬性:值;

注意點:

1. 通用兄弟選擇器必須使用~連線;

2. 通用兄弟選擇器選中的是指定選擇器後面某個選擇器選中的所有標籤,無論有沒有被隔開都可以。

8. 序選擇器

8.1 同級別中的第幾個

:first-child  選中同級別中的第乙個標籤;

:last-child 選中同級別中最後乙個標籤;

:nth-child(幾) 選中同級別中的第幾個標籤;

:nth-last-child(幾) 選中同級別中的倒數第幾個標籤;

:only-child  選中父元素中唯一的元素。

注意點:不區分型別。

8.2  同型別中的第幾個

:first-of-type  選中同級別中同型別的第乙個標籤;

:last-of-type  選中同級別中同型別的最後乙個標籤;

:nth-of-type(幾)  選中同級別中同型別的第幾個標籤;

:nth-last-of-type(幾)  選中同級別中同型別的倒數第幾個標籤;

:only-of-type(幾)  選中父元素中唯一型別的某個標籤。

這個幾可以是數字,也可以是單詞

單詞:odd 奇數,even 偶數。

:nth-child(xn+y) x和y是使用者定義的,n是乙個計數器,從零開始遞增。

css3 基本選擇器之標籤選擇器

三種方式的展示 傳說,在太古神農大神誕生時,天下伴有九泉相生。這九座神泉又稱神農 為天地九井,乃是滋生萬物的源泉。九泉中凝聚了世上最濃厚的靈力,為天地靈脈之樞紐。九泉伴神農而生,後又經神農千萬年辛勞疏通,逐漸成為天地間最重要的生命源泉。九泉面前,眾生平等。無論是神駿奇麗的靈獸仙禽,還是醜陋不堪的兇獸...

標籤 選擇器

選擇標籤,除了大家眾說周知的 id class name 外,還可以 屬性選擇器 a class icon 選擇匹配a 元素,並且 a 元素的class 是以icon 開頭的,class 可以換成任意屬性 a href pdf 選擇匹配a 元素,並且 a 元素的href 是以pdf 結尾的,href...

標籤選擇器

標籤選擇器其實就是html 中的標籤。如右側 編輯器中的 例如下面 p上面的css樣式 的作用 為p標籤設定12px字型大小,行間距設定1.6em的樣式。示例 doctype html 標籤選擇器 title style type text css h1style head body h1 勇氣 h...