css基础选择器有几种

CSS基础选择器一共有五种：标签选择器、础选类选择器、择器ID选择器、有种通配选择器和属性选择器。础选别急着记名字，择器先看一个实际场景。有种

我上周帮朋友调一个博客页面，础选他写了二十多行重复的择器样式代码，每个段落都要单独设置字体颜色和间距。有种我问他为什么不用类选择器，础选他愣了半天——他只会用标签选择器，择器因为教程第一章就教了p { color: red; }这种写法。有种这其实是础选个挺典型的误区：很多人学了标签选择器就觉得够了，但真正写复杂页面时，择器标签选择器反而是有种最不常用的那个。

标签选择器就是直接写HTML标签名，比如div、span、a。它的特点是作用范围特别大，只要页面里有这个标签就全被选中。好处是写起来快，坏处是容易误伤。比如你想让某个区块里的p标签变蓝，但页面其他地方还有别的p标签，它们也会跟着变蓝。这就是为什么后来出现了类选择器。

类选择器用英文句点开头，比如.highlight。它最大的价值在于可以重复使用，而且不限制标签类型。我在实际项目里几乎天天用，因为一个页面上同类样式的元素往往有好几个。比方说导航栏里有三个按钮，它们共享相同的背景色和圆角，你只需要给它们都加上class="btn"，然后写一次.btn { }就行。修改时也方便，只动一处，三个按钮全变。

ID选择器用井号开头，比如#header。它和类选择器看起来很像，但有个硬性规定：同一个页面里ID必须是唯一的。所以它适合用来定位页面里只出现一次的大块结构，比如顶部导航、底部版权区。有个细节容易踩坑：ID选择器的优先级比类选择器高，如果同时用.text和#main .text去设置同一个元素的颜色，后者会赢。这个特性有时候很烦人，调试时得花时间排查。

通配选择器就一个星号*，意思是选中页面里所有元素。我见过有人用它来重置默认边距，写* { margin: 0; padding: 0; }。这招在简单页面上确实管用，但页面一大，性能就会受影响，因为浏览器得遍历每一个元素去应用样式。我自己现在基本不用它做全局重置，而是用更精确的标签选择器组合。

属性选择器稍微冷门一点，但很实用。它用方括号表示，比如[type="text"]能选中所有文本框。还有[href^="https"]可以选中所有以https开头的链接。这个选择器在处理表单或者动态内容时特别好使。我曾经给一个后台管理系统加样式，里面有很多不同状态的输入框，直接用属性选择器按disabled属性来区分，省了加一堆类的功夫。

五种选择器不是孤立的，它们经常组合使用。比如div.content p:first-child，这里其实用到了标签选择器、类选择器和伪类，但基础还是那五种。我的经验是：先写类选择器，碰到唯一性强的结构用ID，标签选择器留给全局默认样式，属性选择器处理特殊状态，通配选择器能不用就不用。

最后说个真实体验。有一次我接手别人的代码，发现整个样式表里全是div和span的标签选择器，改一处样式要翻半天。后来我花了半小时把所有关键位置改成类选择器，代码量少了三分之一，维护起来也轻松多了。所以别觉得选择器种类多是负担，它们其实是给你减负的工具。用得越熟练，写样式就越顺手。

(责任编辑：热点)