CSS 选择器

CSS（层叠样式表）提供了多种选择器，用于选择要应用样式的 HTML 元素。

元素选择器（Element Selector）： 通过元素名称选择 HTML 元素。

p {
  font-size: 16px;
  color: #333;
}

类选择器（Class Selector）： 类选择器通过" . "后跟类名来选取元素。同一个类名可以应用于多个元素，使得样式重用变得非常简便。

.button {
  background-color: #007BFF;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
}

ID 选择器（ID Selector）： 通过元素的唯一标识符（ID）选择 HTML 元素。

ID 选择器以 # 开头，后面跟着 ID 名称。

#container {
  width: 200px;
}

属性选择器（Attribute Selector）： 通过元素的属性选择 HTML 元素。属性选择器可以根据属性名和属性值进行选择。

如下代码，input[type="text"] 选择器将选择所有 type 属性为  "text"  的input元素。

input[type="text"] {
  border: 1px solid gray;
}

后代选择器（Descendant Selector）： 通过指定元素的后代关系选择 HTML 元素。 后代选择器使用空格分隔元素名称。 如下代码，div p 选择器将选择所有在div元素内的p元素。

    div p {
  font-weight: bold;
}