css常见的选择器

1.概念介绍

1. 元素选择器（Element Selector）：这是最基本的选择器，通过 HTML 元素名称选择元素。例如，如果我们想要选择所有段落元素 <p>，就可以使用 p 作为选择器。

2. 类选择器（Class Selector）：类选择器以 . 开头，后面紧跟类名。例如，如果我们有一个类名为 "highlight" 的样式，那么我们可以使用 .highlight 作为选择器来选中所有拥有该类的元素。

3. ID 选择器（ID Selector）：ID 选择器以 # 开头，后面紧跟 ID 名称。ID 在整个 HTML 文档中应该是唯一的。例如，如果我们有一个 ID 为 "main-content" 的元素，那么可以使用 #main-content 作为选择器来选中该元素。

4. 后代选择器（Descendant Selector）：后代选择器用于选择特定元素内部的所有后代元素。它使用空格分隔两个选择器。例如，div p 会选择所有在 <div> 元素内部的段落元素。

5. 子元素选择器（Child Selector）：子元素选择器用于选择特定元素的直接子元素，它使用 > 分隔两个选择器。例如，ul > li 会选择所有 <ul> 元素下的直接 <li> 子元素。

6. 相邻兄弟选择器（Adjacent Sibling Selector）：相邻兄弟选择器用于选择紧接在另一个元素后的元素，它使用 + 分隔两个选择器。例如，h2 + p 会选择紧跟在 <h2> 元素后面的 <p> 元素。

7. 通用选择器（Universal Selector）：通用选择器使用 *，它可以匹配文档中的任何元素。它通常用于设置全局样式或者进行 CSS 的重置。

8. 属性选择器（Attribute Selector）：属性选择器可以根据元素的属性值来选择元素。例如，[type="text"] 可以选择所有 type 属性为 "text" 的元素。

9. 伪类选择器（Pseudo-class Selector）：伪类选择器表示元素的特殊状态，比如鼠标悬停、访问过的链接等。例如，:hover 用于指定鼠标悬停时的样式。

2.代码案例

元素选择器：
css
p {
    color: blue;
}
这段代码会将所有段落元素的文本颜色设置为蓝色。

类选择器：
css
.highlight {
    background-color: yellow;
}
这段代码会将所有拥有 highlight 类的元素的背景颜色设置为黄色。

ID 选择器：
css
#main-content {
    font-size: 16px;
}
这段代码会将 ID 为 main-content 的元素的字体大小设置为 16 像素。

后代选择器：
css
div p {
    font-style: italic;
}
这段代码会将所有在 <div> 元素内部的段落元素的文字样式设置为斜体。

子元素选择器：
css
ul > li {
    list-style-type: square;
}
这段代码会将所有 <ul> 元素下的直接 <li> 子元素的列表样式设置为方块。

相邻兄弟选择器：
css
h2 + p {
    margin-top: 10px;
}
这段代码会将紧跟在 <h2> 元素后面的 <p> 元素的上外边距设置为 10 僫。

通用选择器：
css
* {
    box-sizing: border-box;
}
这段代码会设置文档中所有元素的盒模型为边框盒模型。

属性选择器：
css
input[type="text"] {
    width: 200px;
}
这段代码会选择所有 type 属性为 "text" 的输入框，并将宽度设置为 200 像素。

伪类选择器：
css
a:hover {
    text-decoration: underline;
}