css样式选择器有哪些：常用类型及实操用法

css样式选择器主要分为基础选择器、组合选择器、伪类选择器、伪元素选择器四大类，基础选择器包含标签选择器、类选择器、ID选择器、通配符选择器、属性选择器，是日常开发最常用的类型；组合选择器可实现多元素精准匹配，伪类和伪元素选择器能实现交互效果和局部样式定制，掌握这些选择器的用法，可快速完成页面样式布局，精准控制元素样式。

基础选择器：核心常用类型及用法

基础选择器是css样式选择器的核心，用法简单且适配性强，其中类选择器和标签选择器使用频率最高。标签选择器直接以HTML标签名作为选择器，可统一设置同类标签的样式，比如p{color:red;}会将所有段落文字设为红色，适合全局基础样式设置。类选择器以.class命名，可重复使用，比如.box{width:100px;}，给元素添加class="box"即可应用样式，是开发中最常用的选择器，灵活性最高。

ID选择器以#id命名，一个页面中ID只能唯一，比如#header{height:50px;}，适合设置页面唯一模块的样式，优先级高于类选择器。通配符选择器用*表示，可匹配所有元素，常用于全局重置样式，比如*{margin:0;padding:0;}，但过度使用会影响页面性能，建议仅用于全局初始化。属性选择器通过元素属性匹配，比如input[type="text"]{border:1pxsolid#ccc;}，可精准设置特定属性元素的样式，适配表单等场景。

组合选择器：精准匹配多元素

组合选择器可结合基础选择器，实现更精准的元素匹配，提升样式设置的针对性。后代选择器用空格分隔，匹配父元素下的所有子元素，比如divp{font-size:14px;}，会匹配所有div标签内的p标签。子选择器用>分隔，仅匹配父元素的直接子元素，比如div>p{font-weight:bold;}，避免嵌套子元素被误设置样式，精准度更高。

相邻兄弟选择器用+分隔，匹配紧邻的同级元素，比如h2+p{margin-top:10px;}，可设置标题下方紧邻段落的间距。通用兄弟选择器用~分隔，匹配同级所有后续元素，比如h2~p{color:#333;}，适合设置同级元素的统一样式。组合选择器可叠加使用，比如.boxdiv>p{line-height:1.5;}，进一步缩小匹配范围，避免样式冲突。

伪类与伪元素选择器：实现交互与局部样式

伪类选择器用于定义元素的特定状态，以:开头，常见的有hover、active、focus等，可实现交互效果。比如a:hover{color:blue;}，鼠标悬停在链接上时改变颜色；input:focus{outline:none;border-color:red;}，输入框聚焦时优化边框样式，提升用户体验。伪类选择器还可用于匹配特定位置的元素，比如p:first-child{margin-top:0;}，设置父元素下第一个p标签的样式。

伪元素选择器以::开头，用于为元素添加局部内容或样式，不改变HTML结构。比如p::first-letter{font-size:24px;}，可放大段落首字母；div::before{content:"前缀";}，可在元素前添加自定义内容，常用于添加图标、装饰线等。需要注意的是，伪类选择器优先级高于基础选择器，伪元素选择器仅对特定局部生效，不会影响元素整体布局。

选择器使用注意事项

使用css样式选择器时，需注意优先级和性能问题，避免样式冲突。选择器优先级从高到低依次为：ID选择器>类选择器>标签选择器>通配符选择器，优先级高的样式会覆盖低优先级样式，若需覆盖已有样式，可通过提升选择器优先级实现，不建议频繁使用!important，会破坏样式层级，难以维护。

同时，避免使用过于复杂的组合选择器，比如多层嵌套的后代选择器，会增加浏览器解析成本，影响页面渲染速度。日常开发中，优先使用类选择器，保持选择器简洁易懂，便于后期维护和修改。属性选择器和伪类/伪元素选择器按需使用，适配特定场景即可，无需过度追求选择器的复杂度。