css选择器有哪几种

/* 1. 标签选择器（Element Selector） */
p {
  color: blue;
}
/* 解释：选择所有 <p> 元素，并将它们的文本颜色设置为蓝色。 */

/* 2. 类选择器（Class Selector） */
.red-text {
  color: red;
}
/* 解释：选择所有带有类名为 "red-text" 的元素，并将它们的文本颜色设置为红色。 */

/* 3. ID 选择器（ID Selector） */
#header {
  background-color: gray;
}
/* 解释：选择 ID 为 "header" 的元素，并将其背景颜色设置为灰色。 */

/* 4. 后代选择器（Descendant Selector） */
div p {
  font-size: 16px;
}
/* 解释：选择所有位于 <div> 元素内部的 <p> 元素，并将它们的字体大小设置为 16 像素。 */

/* 5. 子选择器（Child Selector） */
ul > li {
  list-style-type: square;
}
/* 解释：选择所有直接位于 <ul> 元素内的 <li> 元素，并将它们的列表项样式设置为方形。 */

/* 6. 相邻兄弟选择器（Adjacent Sibling Selector） */
h1 + p {
  font-weight: bold;
}
/* 解释：选择紧跟在 <h1> 元素之后的 <p> 元素，并将它们的字体加粗。 */

/* 7. 通用兄弟选择器（General Sibling Selector） */
h1 ~ p {
  color: green;
}
/* 解释：选择所有位于 <h1> 元素之后的 <p> 元素，并将它们的文本颜色设置为绿色。 */

/* 8. 属性选择器（Attribute Selector） */
input[type="text"] {
  width: 100px;
}
/* 解释：选择所有类型为 "text" 的 <input> 元素，并将它们的宽度设置为 100 像素。 */

/* 9. 伪类选择器（Pseudo-class Selector） */
a:hover {
  text-decoration: underline;
}
/* 解释：当鼠标悬停在 <a> 元素上时，将它们的文本下划线显示出来。 */

/* 10. 伪元素选择器（Pseudo-element Selector） */
p::first-line {
  font-weight: bold;
}
/* 解释：选择 <p> 元素的第一行文本，并将它们的字体加粗。 */