CSS Selector簡介和實(shí)例展示

發(fā)布時間:2023-06-22 00:52

CSS Selector簡介和實(shí)例展示

CSS Selector是什么？

在CSS中，Selector（選擇器）用于選中HTML中的特定元素，以應(yīng)用樣式和效果。通過選擇器，我們可以根據(jù)元素的標(biāo)簽名、類名、ID等屬性來選擇特定的元素。

常見的CSS選擇器

下面是一些常用的CSS選擇器：

1. 標(biāo)簽選擇器

標(biāo)簽選擇器是最簡單和最常見的選擇器。它通過HTML元素的標(biāo)簽名來選擇元素。例如，使用標(biāo)簽選擇器"p"可以選擇所有的段落元素：

/*選擇所有的段落元素*/
p {
  color: red;
  font-size: 16px;
}

2. 類選擇器

類選擇器通過HTML元素的"class"屬性來選擇元素。使用類選擇器，我們可以為多個元素應(yīng)用相同的樣式：

/*選擇所有具有"class"屬性為"highlight"的元素*/
.highlight {
  background-color: yellow;
}

3. ID選擇器

ID選擇器通過HTML元素的"id"屬性來選擇元素。與類選擇器不同，每個ID只能應(yīng)用于一個元素：

/*選擇具有"id"屬性為"my-element"的元素*/
#my-element {
  border: 1px solid black;
}

實(shí)例展示

下面是一個使用以上選擇器的實(shí)例：

標(biāo)題
這是一個段落。
這是一個帶有highlight類的段落。
這是一個具有my-element ID的段落。

配圖：Unsplash API

以上是關(guān)于CSS Selector簡介和實(shí)例展示的內(nèi)容。希望對你有所幫助！