css的选择器有哪些

/* 标签选择器：选择所有指定的 HTML 元素 */
p {
  color: blue;
}

/* 类选择器：选择所有带有指定类名的元素 */
.important {
  font-weight: bold;
}

/* ID 选择器：选择带有指定 ID 的唯一元素 */
#header {
  background-color: yellow;
}

/* 通用选择器：选择所有的元素 */
* {
  margin: 0;
  padding: 0;
}

/* 后代选择器：选择作为某个元素后代的所有指定元素 */
div p {
  text-align: center;
}

/* 子选择器：选择作为父元素直接子元素的所有指定元素 */
ul > li {
  list-style-type: none;
}

/* 相邻兄弟选择器：选择紧接在另一个元素之后的所有指定元素 */
h2 + p {
  font-size: 18px;
}

/* 通用兄弟选择器：选择位于另一个元素之后的所有指定元素 */
h2 ~ p {
  color: green;
}

/* 属性选择器：选择带有指定属性的元素 */
input[type="text"] {
  width: 100%;
}

/* 伪类选择器：选择处于特定状态的元素 */
a:hover {
  color: red;
}

/* 伪元素选择器：选择元素的特定部分 */
p::first-line {
  font-weight: bold;
}

解释说明：

• 标签选择器：选择所有指定的 HTML 元素（如 p、div 等）。
• 类选择器：选择所有带有指定类名的元素（如 .important）。
• ID 选择器：选择带有指定 ID 的唯一元素（如 #header）。
• 通用选择器：选择页面中的所有元素（如 *）。
• 后代选择器：选择作为某个元素后代的所有指定元素（如 div p）。
• 子选择器：选择作为父元素直接子元素的所有指定元素（如 ul > li）。
• 相邻兄弟选择器：选择紧接在另一个元素之后的所有指定元素（如 h2 + p）。
• 通用兄弟选择器：选择位于另一个元素之后的所有指定元素（如 h2 ~ p）。
• 属性选择器：选择带有指定属性的元素（如 input[type="text"]）。
• 伪类选择器：选择处于特定状态的元素（如 a:hover）。
• 伪元素选择器：选择元素的特定部分（如 p::first-line）。