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;

}