CSS选择器详解

CSS知识体系之CSS选择器

CSS选择器是CSS语言的基石，它使我们能够指定HTML元素，以便应用样式规则。CSS选择器种类繁多，每种选择器都有独特的用途，可以帮助我们精确地选择所需的元素。

通用选择器

• * (星号) ：匹配所有元素。

元素选择器

• 元素名 ：匹配具有指定元素名的所有元素。例如，p 匹配所有段落元素。

类选择器

• .类名 ：匹配具有指定类名的所有元素。例如，.btn 匹配所有具有“btn”类的元素。

ID选择器

• #ID名 ：匹配具有指定ID的唯一元素。例如，#header 匹配具有ID“header”的元素。

属性选择器

• [属性名] ：匹配具有指定属性的元素。例如，[href] 匹配所有具有“href”属性的元素。
• [属性名="属性值"] ：匹配属性值等于指定值的元素。例如，[href="/index.html"] 匹配“href”属性值为“/index.html”的元素。
• [属性名^="属性值前缀"] ：匹配属性值以指定前缀开头的元素。例如，[href^="https://"] 匹配“href”属性值以“https://”开头的元素。
• **[属性名="属性值后缀"]** ：匹配属性值以指定后缀结尾的元素。例如，`[href=".pdf"]` 匹配“href”属性值以“.pdf”结尾的元素。
• [属性名="属性值包含"]* ：匹配属性值包含指定子字符串的元素。例如，[href*="example"] 匹配“href”属性值包含“example”的元素。

伪类选择器

• :first-child ：匹配父元素中的第一个子元素。
• :last-child ：匹配父元素中的最后一个子元素。
• :nth-child(n) ：匹配父元素中第n个子元素。例如，:nth-child(2) 匹配父元素中的第二个子元素。
• :hover ：当鼠标悬停在元素上时匹配该元素。

伪元素选择器

• ::before ：在元素之前插入内容。
• ::after ：在元素之后插入内容。

组合选择器

选择器可以组合使用以实现更复杂的选择。

• 元素1 元素2 ：匹配同时满足元素1和元素2条件的元素。
• 元素1 > 元素2 ：匹配元素1的直接子元素元素2。
• 元素1 + 元素2 ：匹配元素1之后紧邻的元素2。
• 元素1 ~ 元素2 ：匹配元素1之后的任何元素2。

优先级

当多个选择器匹配同一元素时，优先级决定哪个选择器生效。优先级顺序如下：

1. 内联样式
2. ID选择器
3. 类选择器、属性选择器和伪类选择器
4. 元素选择器和通配符选择器

通过熟练掌握CSS选择器，我们可以实现对HTML元素的精准控制，从而创建出更强大、更灵活的样式表。