有哪些 CSS 选择器？请分别介绍

CSS 选择器CSS Selectors是用于选择 HTML 元素并应用样式的模式。它们是 CSS 的核心决定了哪些元素会受到样式规则的影响。以下是 CSS 选择器的详细分类和介绍1. 基础选择器 (Basic Selectors)这些是最常用、最基础的选择器。通配符选择器 (Universal Selector)符号:*作用: 选择文档中的所有元素。示例:* { margin: 0; padding: 0; }(常用于重置默认边距)类型选择器 / 标签选择器 (Type/Tag Selector)符号: 标签名 (如div,p,h1)作用: 选择所有指定标签名的元素。示例:p { color: blue; }(选择所有p标签)类选择器 (Class Selector)符号:.(点号) 类名作用: 选择所有class属性包含指定值的元素。一个元素可以有多个类。示例:.btn { background: red; }(选择div classbtn或button classbtn primary)ID 选择器 (ID Selector)符号:#(井号) ID 名作用: 选择id属性匹配的元素。ID 在页面中应该是唯一的。示例:#header { height: 100px; }(选择div idheader)属性选择器 (Attribute Selector)符号:[attr],[attrvalue],[attr~value],[attr|value],[attr^value],[attr$value],[attr*value]作用: 根据元素存在的属性或属性的值进行选择。示例:[target]: 选择所有带有target属性的元素。[typetext]: 选择type为 “text” 的输入框。a[href^https]: 选择所有href以 “https” 开头的链接。img[src$.png]: 选择所有src以 “.png” 结尾的图片。2. 层次结构选择器 (Combinators)用于根据元素之间的层级关系进行选择。后代选择器 (Descendant Combinator)符号: 空格作用: 选择指定元素内部的所有后代元素无论嵌套多深。示例:div p { color: red; }(选择所有在div内部的p标签包括divdivp)子选择器 (Child Combinator)符号:作用: 选择指定元素的直接子元素仅一层。示例:div p { color: red; }(选择所有直接位于div下的p标签不包括嵌套更深的p)相邻兄弟选择器 (Adjacent Sibling Combinator)符号:作用: 选择紧接在指定元素之后的第一个同级元素。示例:h1 p { margin-top: 0; }(选择紧跟在h1后面的第一个p)通用兄弟选择器 (General Sibling Combinator)符号:~作用: 选择指定元素之后的所有同级元素。示例:h1 ~ p { color: gray; }(选择h1之后所有的p兄弟元素)3. 伪类选择器 (Pseudo-classes)用于选择处于特定状态的元素或者基于文档结构中的位置进行选择。用户交互伪类::hover: 鼠标悬停时。:active: 元素被激活如鼠标点击瞬间时。:focus: 元素获得焦点如输入框被选中时。:visited: 链接已被访问过。:disabled/:enabled: 表单元素被禁用或启用。结构伪类::first-child: 选择作为其父元素第一个子元素的元素。:last-child: 选择作为其父元素最后一个子元素的元素。:nth-child(n): 选择父元素的第n个子元素支持2n,odd,even。:nth-of-type(n): 选择父元素中指定类型的第n个子元素。:only-child: 选择父元素的唯一子元素。:first-of-type/:last-of-type: 选择指定类型的第一个或最后一个子元素。其他伪类::not(selector): 选择不匹配指定选择器的元素否定选择器。:empty: 选择没有子元素包括文本节点的元素。:target: 选择当前活动的 URL 锚点目标元素。:checked: 选择被选中的单选框或复选框。4. 伪元素选择器 (Pseudo-elements)用于选择元素的特定部分并为其应用样式而不是整个元素。::before: 在元素内容之前插入生成的内容。::after: 在元素内容之后插入生成的内容。注意通常配合content属性使用。::first-line: 选择元素文本的第一行。::first-letter: 选择元素文本的第一个字母。::selection: 选择被用户选中的文本部分如鼠标拖拽选中。::placeholder: 选择输入框的占位符文本。5. 其他选择器选择器列表 (Selector List)符号:,(逗号)作用: 将多个选择器组合在一起对它们应用相同的样式。示例:h1, h2, h3 { font-weight: bold; }层级选择器 (CSS 4 新增部分浏览器支持):has(selector): 父选择器。如果元素包含匹配selector的后代则选中该元素。示例:div:has( p)(选择包含直接子元素p的div)选择器优先级 (Specificity)当多个选择器匹配同一个元素时浏览器根据优先级决定应用哪个样式。优先级从高到低大致如下!important(强制覆盖慎用)内联样式(style...)ID 选择器(#id)类选择器、属性选择器、伪类(.class,[attr],:hover)标签选择器、伪元素(div,::before)通配符、组合符(*,,,~)计算规则通常用 (ID 数量, 类数量, 标签数量) 来比较。例如#id .class的优先级高于.class .class .class。