CSS中的類選擇器和ID選擇器介紹

時間 2021-05-22

標籤 css html 瀏覽器學習字體 spa code htm utf-8 rem 欄目 CSS 简体版

原文原文鏈接

咱們先來看下面這段代碼：css

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS學習(9xkd.com)</title>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <h3>動物園裏有什麼？</h3>
        <p>小白兔</p>
        <p>小獅子</p>
        <p>小老虎</p>
        <p>小猴子</p>
    </body>
</html>

在瀏覽器中的演示效果：
html

若是咱們想要將上述代碼中「小兔子」字體樣式設置爲粉色加粗，其餘內容不變，要怎麼作？若是使用標籤選擇器 p 來設置樣式，那上述代碼中四個 <p> 標籤中的內容樣式都會跟着改變呀，因此這時候用標籤選擇器顯然不合適。瀏覽器

要解決這個問題，咱們就須要用到本節要學習的 CSS 中的類選擇器和 ID 選擇器啦。學習

類選擇器

類選擇器用於描述一組標籤的樣式，一個類選擇器能夠在多個標籤上使用。字體

語法：spa

.class_name{
    屬性：屬性值;
}

類選擇器前面必須有一個點 .，這個點必不可少，是類選擇器的標誌。類選擇器的名稱 class_name 是自定義的，選擇器中的屬性和屬性值跟標籤選擇器中同樣。code

示例：

例如上述代碼中，咱們要給「小兔子」字體樣式設置爲粉色加粗，能夠自定義一個類選擇器：htm

.rabbit{
    color: pink;
    font-weight: bold;
}

而後在 HTML 標籤上經過 class 屬性來使用定義好的類樣式，格式爲：utf-8

<標籤名 class="類名稱">標籤內容</標籤名>

以下所示：rem

<p class="rabbit">小白兔</p>

在使用類樣式的時候，只須要類樣式名，不須要在前面加點。在瀏覽器中演示效果以下：

類選擇器有一個好處就是，咱們能夠在同一個頁面中多個 HTML 標籤上，使用同一個類選擇器。

示例p：

例如咱們除了能夠在 <p> 標籤上使用類選擇器 rabbit，也能夠在 <h3> 標籤上使用：

<body>
    <h3 class="rabbit">動物園裏有什麼？</h3>
    <p class="rabbit">小白兔</p>
    <p>小獅子</p>
    <p>小老虎</p>
    <p>小猴子</p>
</body>

在瀏覽器中演示效果：

ID選擇器

ID選擇器和類選擇器的使用基本差很少，可是還有一些不一樣的地方：

ID 選擇器的是以井號 # 開頭來定義的。而類選擇器是以點 . 來定義的。
ID 選擇器在 HTML 中是能夠經過 id 屬性來使用。而類選擇器是經過 class 屬性來使用的。
同一個頁面中一個ID選擇器只能在中出現一次，是惟一的。而類選擇器能夠在屢次出現，因此ID選擇器的針對性更強。

示例：

經過 # 來定義一個ID選擇器，設置背景顏色爲粉色的樣式：

#only{
    background-color: pink;
}

而後在 HTML 中經過 id 屬性使用這個ID選擇器：

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS學習(9xkd.com)</title>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <h3 class="rabbit">動物園裏有什麼？</h3>
        <p class="rabbit">小白兔</p>
        <p>小獅子</p>
        <p>小老虎</p>
        <p id="only">小猴子</p>
    </body>
</html>

在瀏覽器中演示效果：

咱們能夠在 HTML 標籤中經過 id 屬性來使用 CSS 中對應的 ID 選擇器。在使用時，ID選擇器名稱前面不須要帶井號#。

連接：https://www.9xkd.com/