CSS3 常用选择器汇总

在前端开发中，CSS3 的选择器是样式设计的重要基础。合理运用各种选择器，能精准地选中 HTML 元素并赋予其独特样式，极大提升开发效率与页面美观度。下面为大家详细汇总 CSS3 常用选择器。

元素选择器：这是最基础的选择器，通过 HTML 元素名称来选中元素。例如，使用 p { color: red; } 就能将页面中所有 <p> 元素内的文本颜色设置为红色。

类选择器：以 . 开头，可给多个不同元素添加相同样式。如 <div class="highlight"> 和 <span class="highlight">，只要在 CSS 中写 .highlight { background-color: yellow; }，这些带有 highlight 类的元素背景色都会变为黄色，方便对特定元素进行统一样式设定。

ID 选择器：用 # 开头，具有唯一性。一个页面中 ID 只能被使用一次，如 #main-content { font-size: 18px; }，能精准定位到 ID 为 main-content 的元素并设置字体大小。

属性选择器：能根据元素的属性及属性值来选择元素。比如 input[type="text"] { border: 1px solid blue; }，会选中所有 type 属性为 text 的 <input> 元素并设置蓝色边框。

伪类选择器：用于选择处于特定状态的元素。像 a:hover { color: green; }，当鼠标悬停在链接上时，链接颜色会变成绿色，增强用户交互体验。

伪元素选择器：则是对元素特定部分进行样式设置。例如 p::first-letter { font-size: 2em; }，会将段落的首字母字体放大两倍。

组合选择器：可以将多个选择器组合使用。如后代选择器 div p { color: purple; }，会选中 <div> 元素内所有的 <p> 元素并设置颜色为紫色；相邻兄弟选择器 h2 + p { margin-top: 10px; }，会选中紧跟在 <h2> 后面的 <p> 元素并设置上边距。

CSS3 丰富的选择器为前端开发者提供了强大的样式控制能力。熟练掌握这些选择器，能让我们在网页设计时更加得心应手，打造出美观且交互性强的页面。无论是简单的个人博客，还是复杂的电商平台，它们都是实现精致样式的有力工具。