本節我們來學習 CSS 中的選擇器，選擇器是 CSS 里面一個很重要的概念，HTML 中的所有標簽樣式，都是通過不同的 CSS 選擇器進行控制的。我們只需要通過選擇器，就可以對不同的 HTML 標簽進行選擇，并指定各種樣式聲明。

在 CSS 中三三種最基本的選擇器，分別是標簽選擇器、類選擇器(class)、ID選擇器。

我們知道在 HTML 頁面中引入 CSS 樣式最好的方法是引入外部樣式，也就是將 CSS 代碼單獨放置到一個 .css 文件內，然后再引入這個 CSS 文件。

標簽選擇器

我們知道一個 HTML 頁面是通過很多標簽組成的，CSS 標簽選擇器就是用來聲明這些標簽的，因為每一個 HTML 標簽的名稱都可以作為相應的標簽選擇器的名稱。

示例：

例如我們來看一個例子，下面是一段 HTML 代碼：

CSS學習(9xkd.com)

俠課島

你好，俠課島！

如果我們要為這兩個標簽定義 CSS 樣式，就可以直接在 .css 文件內通過標簽選擇器來聲明樣式：

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

記得在 HTML 中通過 標簽來引入 CSS 文件，此時在瀏覽器中的演示效果如下所示：

從上述代碼中，我們看到，CSS 語法就是由選擇器和聲明塊 {} 組成，每個聲明塊中可以包含一個或多個樣式聲明，并且每條聲明后面以分號 ; 結尾。

當然除了上述例子中的 p 、h3 標簽可以作為標簽選擇器，其他的例如 html、body、a、img 等所有標簽都是可以作為標簽選擇器的。

但是我們在使用標簽選擇器的時候會有一個問題，舉個例子，我們先來看下面這段代碼：

CSS學習(9xkd.com)

動物園里有什么？

小白兔

小獅子

小老虎

小猴子

在瀏覽器中的演示效果：

如果我們想要將上述代碼中 “小兔子” 字體樣式設置為粉色加粗，其他內容不變，要怎么做？ 如果使用標簽選擇器 p 來設置樣式，那上述代碼中四個

標簽中的內容樣式都會跟著改變呀，所以這時候用標簽選擇器顯然不合適。

要解決這個問題，我們就需要用到 CSS 中的類選擇器和 ID 選擇器啦。

類選擇器

類選擇器用于描述一組標簽的樣式，一個類選擇器可以在多個標簽上使用。

語法：

.class_name{ 屬性：屬性值;}

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

示例：

例如上述代碼中，我們要給“小兔子” 字體樣式設置為粉色加粗，可以自定義一個類選擇器：

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

然后在 HTML 標簽上通過 class 屬性來使用定義好的類樣式，格式為：

標簽內容標簽名>

如下所示：

小白兔

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

類選擇器有一個好處就是，我們可以在同一個頁面中多個 HTML 標簽上，使用同一個類選擇器。

示例：

例如我們除了可以在

標簽上使用類選擇器 rabbit，也可以在

標簽上使用：

動物園里有什么？

小白兔

小獅子

小老虎

小猴子

在瀏覽器中演示效果：

ID選擇器

ID選擇器和類選擇器的使用基本差不多，但是還有一些不同的地方：

• ID 選擇器的是以井號 # 開頭來定義的。而類選擇器是以點 . 來定義的。
• ID 選擇器在 HTML 中是可以通過 id 屬性來使用。而類選擇器是通過 class 屬性來使用的。
• 同一個頁面中一個ID選擇器只能在中出現一次，是唯一的。而類選擇器可以在多次出現，所以ID選擇器的針對性更強。

示例：

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

#only{ background-color: pink;}

然后在 HTML 中通過 id 屬性使用這個ID選擇器：

CSS學習(9xkd.com)

動物園里有什么？

小白兔

小獅子

小老虎

小猴子

在瀏覽器中演示效果：

我們可以在 HTML 標簽中通過 id 屬性來使用 CSS 中對應的 ID 選擇器。在使用時，ID選擇器名稱前面不需要帶井號#。

總結

當我們想要在 HTML 元素中設置 CSS 樣式時，可以通過選擇器來實現，最常用的是三種基礎選擇器。當標簽選擇器不能滿足我們的需求時，我們就可以使用類選擇器和ID選擇器。

記住在同一個頁面中，不允許有相同的 id 出現，但是允許有相同的 class。

總結

以上是生活随笔為你收集整理的uniapp怎么引入css_CSS 三种基础选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。