1. 程式人生 > >奮鬥吧 自己的路跪著也得走

奮鬥吧 自己的路跪著也得走

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是一個計數器,從零開始遞增。