CSS的三種基礎選擇器

時間 2021-04-07

標籤 css html 學習字體 code htm utf-8 class meta 欄目 CSS 简体版

原文原文鏈接

標籤選擇器
類選擇器
ID選擇器

標籤選擇器

一個 HTML 頁面是經過不少標籤組成的，CSS 標籤選擇器就是用來聲明這些標籤的，由於每個 HTML 標籤的名稱均可以做爲相應的標籤選擇器的名稱。css

示例：html

下面是一段html代碼：學習

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS學習</title>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <h3>學習</h3>
        <p>我愛學習，學習使我快樂。</p>
    </body>
</html>

若是咱們要爲這兩個標籤訂義 CSS 樣式，就能夠直接在 .css 文件內經過標籤選擇器來聲明樣式：字體

h3{
    color: red ;
}
p{
    color: green;
}

CSS 語法就是由選擇器和聲明塊 {}組成，每一個聲明塊中能夠包含一個或多個樣式聲明，而且每條聲明後面以分號 ; 結尾。code

除了上述例子中的 p、h3 標籤能夠做爲標籤選擇器，其餘的例如html、body、a、img等標籤都是能夠做爲標籤選擇器的。htm

類選擇器

類選擇器用於描述一組標籤的樣式，一個類選擇器能夠在多個標籤上使用。
語法：utf-8

.class_name{

    屬性：屬性值;
}

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

示例：
html代碼：class

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS學習</title>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <h3>動物園</h3>
        <p class="rabbit">小白兔</p>
        <p>小獅子</p>
        <p>小老虎</p>
        <p>小猴子</p>
    </body>
</html>

要給「小兔子」字體樣式設置爲粉色加粗，能夠自定義一個類選擇器：meta

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

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

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

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

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學習</title>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <h3>動物園</h3>
        <p class="rabbit">小白兔</p>
        <p>小獅子</p>
        <p>小老虎</p>
        <p id="only">小猴子</p>
    </body>
</html>