CSS 有哪些常用选择器

在网页设计与开发中，CSS（层叠样式表）起着至关重要的作用，它能够为 HTML 页面赋予丰富的样式和交互效果。而 CSS 选择器则是 CSS 中用于选取 HTML 元素的模式，准确运用各种选择器可以高效地对不同元素进行样式设置。下面就为大家介绍一些常用的 CSS 选择器。

元素选择器：这是最基础、最直接的选择器。通过 HTML 元素的标签名来选取元素。例如，要设置所有段落的字体颜色为红色，可以这样写：p { color: red; }。只要页面中有<p>标签，都会应用此样式。

类选择器：使用“.”加上自定义的类名来选择元素。类选择器的好处在于可以为不同的元素添加相同的类名，从而应用统一的样式。比如，想要让一些不同类型的元素都具有相同的边框样式，可以先定义一个类：.bordered { border: 1px solid black; }，然后在 HTML 中给需要的元素添加这个类名，如<div class="bordered">、<span class="bordered">等。

ID 选择器：以“#”加上唯一的 ID 名来选择特定的一个元素。ID 在一个页面中应该是独一无二的，所以 ID 选择器通常用于为特定元素设置独特的样式。例如：#main-content { background-color: lightblue; }，只有 ID 为“main-content”的元素会应用此背景色。

属性选择器：依据元素的属性来选取元素。比如，a[href] 可以选择所有带有 href 属性的 <a> 标签元素；input[type="text"] 能选择所有类型为“text”的输入框。

组合选择器：包括后代选择器、子选择器、相邻兄弟选择器和通用兄弟选择器。后代选择器使用空格分隔，如 div p 会选择 <div> 元素内部所有的 <p> 元素；子选择器用“>”，div > p 只选择 <div> 元素的直接子元素 <p>；相邻兄弟选择器“+”，h2 + p 选择紧跟在 <h2> 元素后面的 <p> 元素；通用兄弟选择器“~”，h3 ~ p 选择在 <h3> 元素之后的所有 <p> 元素。

掌握这些常用的 CSS 选择器，能够让开发者更加灵活精准地控制网页元素的样式，打造出令人满意的页面效果，提升用户体验。