快速查找和記憶常用的CSS選擇器

CSS選擇器是網頁開發中非常重要的一部分，它允許我們通過選擇元素的方式對網頁進行樣式設置和操作。在日常開發中，掌握常用的CSS選擇器對于編寫高效的CSS代碼非常重要。下面將介紹一些常用的CSS選擇器，同時提供具體的代碼示例，以幫助大家快速查找和記憶。

p {
  color: red;
}

類選擇器（class selector）
類選擇器以點號（.）開頭，通過選擇指定class屬性的元素來應用樣式。例如，如下代碼將設置所有具有class為”box”的元素的背景色為**：

.box {
  background-color: yellow;
}

id選擇器（id selector）
id選擇器以井號（#）開頭，通過選擇指定id屬性的元素來應用樣式。注意，id選擇器在同一頁面中應唯一。例如，如下代碼將設置id為”header”的元素的字體為20px：

#header {
  font-size: 20px;
}

后代選擇器（descendant selector）
后代選擇器通過選擇某個元素的后代元素來應用樣式。后代選擇器使用空格分隔元素。例如，如下代碼將設置所有div元素內部的段落文字顏色為藍色：

div p {
  color: blue;
}

子元素選擇器（child selector）
子元素選擇器通過選擇某個元素的直接子元素來應用樣式。子元素選擇器使用大于號（>）分隔元素。例如，如下代碼將設置所有類為”container”的div元素的直接子元素的字體大小為18px：

div > .container {
  font-size: 18px;
}

相鄰兄弟選擇器（adjacent sibling selector）
相鄰兄弟選擇器通過選擇某個元素的相鄰兄弟元素來應用樣式。相鄰兄弟選擇器使用加號（+）分隔元素。例如，如下代碼將設置所有具有相鄰的同級元素的背景色為灰色：

div + div {
  background-color: gray;
}

偽類選擇器（pseudo-class selector）
偽類選擇器用于選擇特定狀態的元素，例如:hover用于選擇鼠標懸停狀態的元素。例如，如下代碼將設置鼠標懸停在鏈接上時的文字顏色為紅色：

a:hover {
  color: red;
}

偽元素選擇器（pseudo-element selector）
偽元素選擇器用于選擇元素的特定部分，例如::before用于在元素之前添加內容。例如，如下代碼將在p元素的前面添加一個文本塊：

p::before {
  content: "前面有一個文本塊";
}