什么是CSS选择器，精通CSS选择器，精准定位HTML元素的终极指南

选择器是CSS的引擎。本文将全面解析CSS各类选择器，从基础到高级，教你如何像狙击手一样精准地选中目标元素并进行样式化。

什么是CSS选择器？

CSS选择器是CSS中最基础且强大的部分，它决定了CSS规则将应用于哪些HTML元素。简单来说，​选择器就是用来”选择”或”找到”你想要样式化的HTML元素的模式。

一、基本选择器

这是最常用的一组选择器。

1. ​元素选择器​：根据HTML标签名选择元素。

   p { } /* 选择所有 <p> 标签 */
   div { } /* 选择所有 <div> 标签 */

2. ​类选择器​：根据元素的class属性选择。类名以点（.）开头。一个元素可以有多个类，一个类也可用于多个元素。

   <p class="text-danger">警告文字</p>
   <div class="text-danger box">一个危险的盒子</div>

   .text-danger { color: red; } /* 选择所有 class 包含 ‘text-danger’ 的元素 */

3. ​ID选择器​：根据元素的id属性选择。ID以井号（#）开头。一个页面中同一ID应只出现一次，具有唯一性。

   <div id="header">网站头部</div>

   #header { background-color: gray; } /* 选择 id 为 ‘header’ 的元素 */

4. ​通配符选择器​：选择页面中的所有元素。

   * { margin: 0; padding: 0; } /* 常用作清除浏览器默认边距 */

二、组合选择器

通过组合基本选择器，可以更精确地定位元素。

1. ​后代选择器（空格）​​：选择指定元素内部的所有后代元素（不论嵌套多深）。

   div p { color: blue; } /* 选择所有在 <div> 内部的 <p> */

2. ​子元素选择器（>）​​：只选择作为某元素直接子元素的元素（仅一代）。

   div > p { color: red; } /* 只选择作为 <div> 直接子元素的 <p> */

3. ​相邻兄弟选择器（+）​​：选择紧接在另一元素后的兄弟元素。

   h2 + p { font-weight: bold; } /* 选择紧跟在 <h2> 后面的第一个 <p> */

4. ​后续兄弟选择器（~）​​：选择指定元素之后的所有同级元素。

   h2 ~ p { color: green; } /* 选择同一级中，<h2> 后面的所有 <p> */

三、伪类选择器

用于定义元素的特殊状态。

a:hover { color: orange; } /* 鼠标悬停在链接上时的样式 */
a:visited { color: gray; } /* 已访问过的链接 */
li:first-child { font-size: 2em; } /* 选择第一个 <li> 元素 */
li:nth-child(odd) { background: lightgray; } /* 选择奇数位置的 <li> */
input:focus { border-color: blue; } /* 输入框获得焦点时的样式 */

四、总结与练习

熟练使用选择器是掌握CSS的关键。学会正确使用选择器，可以更高效的让CSS为你工作，提升网页设计效率。