资料目录

CSS 的基础选择器

2020年04月28日更新
观看视频

咱们今天要学的是CSS的选择器。CSS的选择器其实有很多种，不过平常开发最主要用到的，就是下面这几种了。我们这节课程会讲到前三个比较基础的选择器，下一节讲另外两个稍微复杂一点点的选择器。那这些选择器，到底是什么东东，且听我一一道来。

  1. 标签选择器
  2. id 选择器
  3. class 选择器
  4. 后代选择器
  5. 子类选择器

CSS的常用基础选择器

先打开WebStorm，新建一个index.html文件，打一个!号，然后按tab键。这样HTML的基础格式就出来了。接下来我们在body标签里面，放一个p标签和一个h标签。

<html>
<head>
    <meta charset="utf-8">
    <!-- ... -->
</head>

<body>
<h1>CSS入门课程</h1>
<p>在ITFun学CSS，好开心啊！</p>
</body>
</html>

浏览器默认显示的文字，都是黑色的，这样实在是有点单调了。如果我们现在想要改变P元素的颜色，那就需要用到CSS选择器了。

所谓的选择器，其实就是把你想改变样式的元素，给找出来。

标签选择器

因为我们想改变的是P元素的颜色，所以你需要在HTML的head标签中加上这样的代码。

<head>
    <meta charset="utf-8">
    <!-- ... -->

    <style>
        p {
            color: red;
        }
    </style>
</head>

刷新一下，果然p标签包含的内容，就变成了红色了。大家在回头看看我们写的这段代码是什么意思。

CSS的标签选择器

首先要在head标签中，添加上一对style标签。style的中文意思就是样式。所有的CSS代码，都要写在这一对style标签之中。

里面的p就是CSS的选择器了。所谓的选择器，说白了，就是你想改变谁，就需要先把这个元素给找出来。我们写了一个p，那么p标签包括起来的内容，就会发生变化。我们把它的颜色变成了红色。如果你想让h标签也变颜色，那我们可以继续加上这样的代码。

<head>
    <meta charset="utf-8">
    <!-- ... -->

    <style>
        p {
            color: red;
        }

        h1 {
            color: yellow;
        }
    </style>
</head>

CSS的标签选择器

但是这样做会有一个缺点，就是网页中所有被你指定的标签都会生效，当你选择h1后，网页中所有的h1都会变成黄色，你若不信，那么我们在页面中，再添加另一个h标签试试。

<body>
<!-- ... -->

<h1>耶耶耶，我学会了~</h1>
</body>

刷新一下，果然这个h1标签中的内容也变成黄色。那么有没有单独就指定网页中某一个元素的方法呢？当然有的~

CSS的标签选择器

id 选择器

id选择器，就是给网页上的元素，加上一个id，这个id就相当于这个网页元素的名字。通过你自定义的这个名字，你就能单独给某一个网页元素添加样式了。

举个栗子，咱们先将刚才写的代码都删掉。添加下面的标签。

<body>
<h1>貂蝉</h1>
<h1>昭君</h1>
<h1>小猪猪</h1>
</body>

css的id选择器

这里有三个名字了，貂蝉和昭君都是有名的大美女。至于小猪猪美不美，大家就仁者见仁智者见智了。现在需求是这样的，如果我只想把昭君同学的名字变成红色，但是其他人的不变色，应该怎么办呢？

这个时候，如果你还通过h1选择器，那么所有的h1都会变色，这肯定就不对了。为了达到需求，就可以通过指定id的方式，来指明只需要改变昭君的颜色。

我们给中间的昭君，加一个id，它的值是beauty。

<body>
<!-- ... -->
<h1 id="beauty">昭君</h1>
</body>

接着去style中，加上这样的CSS。

<style>
#beauty {
    color: red;
}
</style>

css的id选择器

刷新看看，果然只有昭君改变颜色了，其他的h标签，都还是默认的黑色。好，大家注意看了，这里有一个非常奇怪的#号。

这其实是CSS中规定好的，id选择器的写法。也就说，如果你要通过id来找一个元素，就必须在选择器前面加上#号。而且#号和id的名字中间，不能有空格！id选择器，也就是这么用的了，是不是很简单。

class 选择器

大家思考一下，有一个小问题。如果我想让昭君、貂蝉两位大美女，她们两个变成红色，而小猪猪保持默认的颜色，又应该怎么实现呢？
那你可能第一时间就想到，是不是可以给貂蝉也加一个叫做red的id呢？

<html>
<head>
    <meta charset="utf-8">
    <!-- ... -->

    <style>
        #beauty {
            color: red;
        }
    </style>
</head>

<body>
<h1 id="beauty">貂蝉</h1>
<h1 id="beauty">昭君</h1>
<h1>小肥猪</h1>
</body>
</html>

CSS中id选择器不能重名

刷新浏览器，确实貂蝉和昭君确实变成红色了。但这样做实际上是错误的，你看编辑器里面都直接报错了呢。就算浏览器可以正常显示，但也一定不要这样用。原因是

每个页面中，不能存在同名的id！

也就说，你让一个元素的id是beauty了。这个页面中，就不能再让别的元素id也叫beauty。现在可能还感觉不到有什么问题，等后面学到JavaScript。如果碰到同名的id，会直接导致程序运行错误的。为了解决这个问题，这就需要用到class选择器了。

class选择器的用法也非常的简单。

<html>
<head>
    <meta charset="utf-8">
    <!-- ... -->

    <style>
        .beauty {
            color: red;
        }
    </style>
</head>

<body>
<h1 class="beauty">貂蝉</h1>
<h1 class="beauty">昭君</h1>
<h1>小猪猪</h1>
</body>
</html>

将HTML中的id全部改成class，再将CSS中的#号改为.号。刷新一下，这样就好了，编辑器中也不会报错了。

CSS的class选择器

class你可以这么理解，class本身有班级、类的意思，当大家有相同的class，就表示大家是同一类的，都是大美女。当设置好样式后，属于这一类的元素，就会全部改变了。

总结

CSS代码，需要写在head中的style标签里面。CSS代码，由选择器、属性、值构成。

选择器类型 用法举例 说明
标签选择器 p 相同标签全部被选中
id 选择器 #pig 不能重复
class 选择器 .beauty 可以重复

已添加到喜欢了