前端开发：CSS（2）—— 选择器

前面我们初步学习了CSS，对其有了基本的认识。下面我们来具体学习CSS中的选择器。

选择器的种类

1.基础选择器

（1）标签选择器

选择器的种类

以下内容为CSS2标准中支持的选择器。

1.基础选择器

基础选择器都是由单个选择器构成的。包括：标签选择器、类选择器、id选择器和通配符选择器。

（1）标签选择器

上一节文章我们修改了段落标签p的样式。而我们在CSS文件中书写的选择器就为标签选择器。它只会修改对应标签的样式，而不会修改其他标签的样式。

html 复制代码

p {
    color:red;
    font-size:40px;
}

（2）类选择器

类似于标签选择器，我们在标签中添加一个class类属性，类选择器中修改的样式会作用在带指定类的标签上。

类选择器要在前面加一个 .

例如，我们用三个段落标签，并给不同的类：

html 复制代码

<body>
    <p class="cat">猫</p>
    <p class="dog">狗</p>
    <p class="rabbit">兔</p>
    <p class="bird">鸟</p>
</body>

在给出不同的类选择器：

html 复制代码

.cat {
    color:black;
    font-size:20px;
}

.dog {
    color:darkgrey;
    font-size:30px;
}

.rabbit {
    color: white;
    font-size:10px; 
}

.bird {
    color:green;
    font-size: 5px;
}

最后运行可以看到四个段落文字有不同的效果。

（3）id选择器

同上，在标签中添加id属性，并类似地在CSS中使用id选择器。id选择器需要再前面加一个#；这里就省略了。

（4）通配符选择器

选取*的定义，选择所有的标签。通配符选择器在实际开发中用来针对页面中所有的元素默认样式进行消除，主要用来消除边距。例如：

html 复制代码

* {
    background-color: bisque;
}

这时我们运行会发现整个网站的背景都变为了我们修改的颜色。并且优先级更高。如果我们单独修改某一段的标签样式，则无法修改成功。

2.复合选择器

复合选择器其实就是多个基础选择器相互结合。具体实现我们就不再探讨。

3.伪类选择器

最后我们来学习一下伪类选择器。它一般用来定义元素状态，可以用于选择处于特定**状态**或满足特定**条件**的元素，这些状态无法通过常规选择器直接定位。它们以冒号 `:` 开头，附加在基础选择器之后。

下面列举几种常见用法：

1.：hover 鼠标悬停时

html 复制代码

a:hover { color: red; } /* 鼠标悬停时链接变红 */

2.：active 元素被激活（如单击时）

html 复制代码

button:active { background: blue; } /* 按钮按下时背景变蓝 */

3.：focus 元素获得焦点（如输入框被选中）

html 复制代码

input:focus { border-color: green; } /* 输入框聚焦时边框变绿 */

4.：link 未访问的链接

html 复制代码

a:link { color: purple; }

5.：visited 已访问的链接

html 复制代码

a:visited { color: gray; }