2026 六大安全趋势：AI 智能体、后量子、零信任，企业安全底线指南
2026/6/9 9:48:56
标签
选择器
在阅读这篇文章之前，我默认你对html标签有所了解， 但了解并不是很多。
所以我们先看一个最简单的案例。
div{color:red}这里展示了一个对div中文本颜色color的修改，将其修改为红色color:red。
效果是这样的：
这很简单，我们继续。
类似div这类在style内声明对特定dom进行样式操作的键我们称为选择器。顾名思义，我们需要“选择”某个dom节点，然后编写规则，对它实现我们想要实现的样式。
选择器列表
如果出现两个规则一致的选择器，我们可以将他们分开编写。
.a{color:red}.b{color:red}但是不是感觉，我们可以用什么把他们连起来，精简一下我们的代码？
所以选择器列表可以帮助我们完成这个内容。
.a, .b{color:red}看上去是不是很简单？我们使用一个逗号，将两个选择器连接在一起，这样样式对两个选择器的内容都可以生效。
但如果，我写错了呢？
.a{color:red}..b{color:red}很可惜，现在只有a生效了。如果任何一个选择器无效 (存在语法错误)，那么整条规则都会被忽略。
那如果在选择器列表里呢？效果是一样的，并且被组合的整个规则都会失效，无论是a还是b都不会被样式化。
.a, ..b { color:red }所以我们在编写的时候一定要注意：对所有的选择器都要做重复度检查，避免写错导致样式不被渲染的情况发生。
选择器的种类
选择器有很多种，例如html元素（div、span等）、类名（html里所有class后的字面量）、id（html唯一）、伪类（虚假html）、以及规则选择器（子节点等）。
类型、类和 ID 选择器
最简单的就是类型。基本上是所有的html标签，都可以作为类型选择器。
div{border:1px solid red;}类和id分别对应html标签的class和id。
.special{background-color:blue;}#unique{border-radius:4px;}标签属性选择器
如果我想要在很多个a标签里找一个修改，但他们的类名或id都一致，该怎么办呢？
我们可以使用下面的方法，在标签后跟随一个属性，这样就可以了。
a[title]{}或者你也可以直接指定对应标签的某个属性和他的属性值：
a[href="https:www.baidu.com"]{}这样会清晰许多。
伪类选择器
当然，我们也会遇到很多问题：例如我们很多交互行为，例如悬浮、点击等操作也需要样式的参与。但这种我们很难通过在对应的标签上添加样式来解决，所以我们还需要伪类
伪类主要用来样式化一个元素的特定状态。其语法主要是在我们需要添加状态的选择器后跟随一个":"，例如下面的案例，我们给a标签添加一个只要鼠标悬浮，颜色就会变成红色并且鼠标变成手指指向的状态：
a:hover{color:redcursor:pointer}这样我们就可以实现很多想要实现的效果。
当然，伪类也包含伪元素，通常选择的是这伪元素的一部分。
而伪元素则是“::”,这样可以和伪类区分来。
例如::first-line，就会选择选择器中的第一行。
<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><title>Document</title><style>p::first-line{text-transform:uppercase;}</style></head><body><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p></body></html>这样，我们的样式就会更加简单。
运算符
我们固然可以使用对应的选择器列表来处理样式，但这样很难去圈定这部分样式是外层还是内层。所以我们可以使用运算符来规定我们想要设置的子集的样式（而不是其中全部的样式）
<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><title>Document</title><style>p > span{text-transform:uppercase;}</style></head><body><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.<span>ss</span></p></body></html>至此，所有的选择器类型就说到这里，接下来我们将进行下一步：学习【属性选择器】