CSS选择器有哪些类型_常见CSS选择器分类与作用详解

CSS选择器用于精准选中HTML元素并应用样式，包括基础选择器（如元素、类、ID、通配符）、组合选择器（后代、子元素、相邻和通用兄弟）、属性选择器（按属性及值匹配）以及伪类和伪元素选择器（用于状态和虚拟内容），合理使用可提升样式的灵活性与维护性。

CSS选择器是网页样式设计的核心工具，用来选中HTML元素并为其应用样式。掌握不同类型的CSS选择器，能更精准、高效地控制页面布局和外观。下面介绍常见的CSS选择器类型及其作用。

1. 基础选择器

基础选择器是最常用的一类，适用于大多数简单场景。

<li> 元素选择器：通过标签名选中元素。例如 p { color: blue; } 会选中所有 <p></p> <div class="aritcle_card"> <a class="aritcle_card_img" href="/ai/1327"> <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680183323472.jpg" alt="爱改写"> </a> <div class="aritcle_card_info"> <a href="/ai/1327">爱改写</a> <p>AI写作和改写润色工具</p> <div class=""> <img src="/static/images/card_xiazai.png" alt="爱改写"> <span>87</span> </div> </div> <a href="/ai/1327" class="aritcle_card_btn"> <span>查看详情</span> <img src="/static/images/cardxiayige-3.png" alt="爱改写"> </a> </div> 标签。 <li> 类选择器：以点号（.）开头，选中具有指定class的元素。如 .highlight { background: yellow; } 可为所有 class="highlight" 的元素设置背景色。 <li> ID选择器：以井号（#）开头，选中具有特定ID的元素。例如 #header { width: 100%; }，ID在页面中应唯一。 <li> 通配符选择器：用 * 表示，匹配所有元素。常用于重置默认样式，如 * { margin: 0; padding: 0; }。

2. 组合选择器

组合选择器通过组合多个基础选择器，实现更精确的匹配。

<li> 后代选择器：用空格分隔，选中某元素内部的所有指定后代。例如 div p 会选中所有在 <div> 内部的 <code><p></p> 元素。<li> 子元素选择器：使用 > 符号，仅选中直接子元素。如 ul > li 只选中 <ul></ul> 的直接子项 <li>，不包括嵌套层级更深的。 <li> 相邻兄弟选择器：用 + 连接，选中紧接在另一元素后的兄弟元素。例如 h2 + p 选中紧跟在 <h2></h2> 后的第一个 <p></p>。 <li> 通用兄弟选择器：用 ~ 连接，选中前面有某元素的所有同级兄弟。如 h2 ~ p 会选中所有在 <h2></h2> 之后的同层 <p></p> 元素。

3. 属性选择器

属性选择器根据元素的属性及属性值进行匹配，适合处理表单或动态内容。

立即学习“前端免费学习笔记（深入）”；

<li> [type="text"]：选中所有 type 属性等于 "text" 的元素。 <li> [href]：选中所有带有 href 属性的元素，比如链接。 <li> [class^="btn-"]：选中 class 属性值以 "btn-" 开头的元素，支持前缀匹配。 <li> [src$=".png"]：匹配 src 属性以 ".png" 结尾的图片。 <li> [data-role~="modal"]：匹配 data-role 属性中包含单词 "modal" 的元素。

4. 伪类与伪元素选择器

这类选择器用于选中元素的特殊状态或生成虚拟内容。

<li> 伪类选择器：以 : 开头，表示元素的特定状态。例如：
<li> :hover：鼠标悬停时的样式。 <li> :focus：元素获得焦点时，常用于输入框。 <li> :nth-child(n)：选中父元素下的第 n 个子元素，支持奇偶选择如 :nth-child(odd)。 <li> :first-of-type：选中同类型中的第一个元素。
<li> 伪元素选择器：以 :: 开头，创建虚拟元素。常见有：
<li> ::before 和 ::after：在元素内容前后插入装饰性内容，常配合 content 属性使用。 <li> ::first-line：选中块级元素的第一行文本。 <li> ::selection：定义用户选中文本时的高亮样式。

基本上就这些。熟练运用这些选择器，能大幅提升CSS的灵活性和可维护性。实际开发中建议优先使用类选择器，避免过度依赖ID或深层嵌套，保持样式清晰高效。