常见的css选择器汇总
在CSS中，选择器是用于选择要应用样式的HTML元素的模式或字符串。选择器类型丰富多样，下面是一些常见的选择器：
一、 基本选择器（Basic Selectors）：
1、元素选择器（Element Selector）
选择所有指定类型的HTML元素。
1)、HTML元素的标签名。
1、p: 选择所有 <p> 元素（段落）。
2、h1, h2, h3, 等：选择所有对应层级的标题元素。
3、div: 选择所有 <div> 容器元素。
4、span: 选择所有 内联元素。
5、a: 选择所有超链接 <a> 元素。
6、ul, ol, li: 分别选择无序列表、有序列表和列表项。
7、table, tr, td, th: 选择表格及其行、单元格和表头。
2)、自定义HTML5元素选择器
在HTML5中，引入了一些新的语义化标签，这些标签也可以作为元素选择器使用。**
1、article: 选择所有文章内容元素。
2、section: 选择所有章节元素。
3、header: 选择所有头部区域元素。
4、footer: 选择所有页面底部区域元素。
5、nav: 选择所有导航栏元素。
6、main: 选择页面主体内容元素。
7、aside: 选择侧边内容或附加信息元素。
8、figure, figcaption: 分别选择图像或图表及其标题元素。
p {color: blue;}
2、类选择器（Class Selector）
选择所有具有指定类名的元素，类名前加点号（.）。
.my-class {color: red;
}
3、ID选择器（ID Selector）
选择具有指定ID的元素，ID前加井号（#）。
#my-id {color: green;
}
4、通配符选择器（Universal Selector）
选择所有元素。
* {margin: 0;padding: 0;}
二、 组合选择器（Combinator Selectors）：
- 后代选择器（Descendant Selector）: 选择某元素的所有后代元素。
div p {color: yellow; } - 子选择器（Child Selector）: 选择某元素的直接子元素。
div > p {color: orange; } - 相邻兄弟选择器（Adjacent Sibling Selector）: 选择紧接在某元素后的兄弟元素。
h1 + p {color: purple; } - 通用兄弟选择器（General Sibling Selector）: 选择某元素之后的所有兄弟元素。
h1 ~ p {color: pink; }
三、 属性选择器（Attribute Selectors）：
- 存在属性选择器: 选择包含指定属性的元素。
a[target] {color: cyan; } - 等于属性选择器: 选择属性值等于指定值的元素。
input[type="text"] {color: navy; } - 包含字符串属性选择器: 选择属性值包含指定子字符串的元素。
[title*="hello"] {color: brown; } - 以指定字符串开头的属性选择器: 选择属性值以指定字符串开头的元素。
[class^="btn-"] {color: teal; } - 以指定字符串结尾的属性选择器: 选择属性值以指定字符串结尾的元素。
[class$="-active"] {color: pink; }
四、 伪类选择器（Pseudo-classes）：
- 动态伪类: 如
:hover、:focus、:active。a:hover {color: red; } - 结构性伪类: 如
:first-child、:last-child、:nth-child(n)、:nth-of-type(n)。p:first-child {color: green; } p:nth-child(2) {color: blue; }
五、 伪元素选择器（Pseudo-elements）：
- 双冒号语法:
::before、::after、::first-letter、::first-line。p::before {content: "Note: ";color: gray; } p::first-line {font-weight: bold; }
这些选择器可以单独使用，也可以组合使用，以实现复杂而精确的样式应用。CSS选择器的灵活性和强大功能使得它们在网页设计和开发中至关重要。