CSS 选择器 - 绿叶网

CSS 选择器是什么？

很多教程一上来就开始讲：“一个样式的语法是由3部分组成：选择器、属性和属性值……”，然后接着滔滔不绝地介绍选择器的语法、类型等。小伙伴们几乎把选择器这一章看完了，都不知道选择器究竟是什么东西！

为了避免这种悲剧再次重演，在介绍选择器的语法之前，有必要先给大家详细探讨一下选择器究竟是怎么一回事。下面先来看一个简单的例子。

示例 1：为什么要使用 CSS 选择器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div>绿叶网</div>
    <div>绿叶网</div>
    <div>绿叶网</div>
</body>
</html>

页面效果如下图所示。

CSS 选择器

分析：

对于这个例子，如果我们只想将第 2 个 div 文本颜色变为红色，该怎么实现呢？我们肯定需要通过一种方式来 “选中” 第 2 个 div（因为其他的 div 不能选中），只有选中了才可以为其改变颜色。

使用 CSS 选择器选中第 2 个 div

像上面这种选中你想要的元素的方式，我们称之为 “选择器”。选择器，说白了就是用一种方式把你想要的那个元素选中。只有把它选中了，你才可以为这个元素添加 CSS 样式。这样去理解，够简单了吧？

在 CSS 中，有很多方式可以把你想要元素选中，这些不同的方式其实就是不同的选择器。选择器的不同，在于它的选择方式不同，但是它们的最终目的是相同的，那就是把你想要的元素选中，然后才可以定义该元素 CSS 样式。当然，你也有可能会用某一种选择器来代替另外一种选择器，这仅仅是选择方式不同罢了，但目的还是一样的。

CSS 选择器的语法

CSS 选择器的功能就是把所想要的元素选中，然后使得我们可以操作这些元素的 CSS 样式。

语法：

选择器 {
    属性1 : 取值1;
    ……
    属性n : 取值n;
}

说明：

“选择器” 放在规则的最前面，用于指定要应用样式的 HTML 元素。花括号 “{}” 内是声明块，包含了要应用的 CSS 样式。每个声明都由 “属性名” 和 “属性值” 组成，用英文冒号（:）分隔，并以英文分号（;）结尾。

实际上，下面 2 种写法都是可行的。

/* 写法 1 */
选择器 {
    属性1 : 取值1;
    ……
    属性n : 取值n;
}

/* 写法 2 */
选择器
{
    属性1 : 取值1;
    ……
    属性n : 取值n;
}

在实际开发中，我们更推荐写法 1，这是因为写法 1 能减少不必要的换行，使得代码更紧凑，尤其在大型项目中可节省文件体积（虽然影响微小）。并且最重要的是，大多数前端项目都是使用这样写法。

示例 2：CSS 选择器的基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .current {
            color: blue;
            font-size: 20px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div>绿叶网</div>
    <div class="current">绿叶网</div>
    <div>绿叶网</div>
</body>
</html>

页面效果如下图所示。

CSS 选择器的使用

分析：

.current {
    color: blue;
    font-size: 20px;
    font-weight: bold;
}

上面代码表示使用选中 class 为 "current" 的元素，然后设置该元素的 color、font-size、font-weight 这 3 个属性。

这里只是感性认识一下 CSS 选择器是怎样一个东西，小伙伴们暂时看不懂没有关系。后面我们会慢慢学到这些语法。

常用的 CSS 选择器

CSS 选择器非常多，但在这里我们不会像其他教材那样，恨不得一上来就把所有的 CSS 选择器都介绍完，最后却搞得大家一头雾水。对于初学者而言，只需要掌握以下几种 CSS 选择器就够了。

除了上面几种选择器，CSS 还有很多其他的选择器，小伙伴们可以自行搜索了解一下。