网页开发入门

网页开发入门｜07 选择器

在一些网站和APP中的主题换肤或是个性装扮等功能，就是靠修改对应元素的选择器中的样式而实现的。

Jerry

• 12 min read
网页开发入门｜07 选择器

上节课我们学习了CSS和style标签，以及如何将负责网页结构和内容的HTML代码，和负责网页样式的CSS代码，分开到相对独立的两个地方进行编写。

而CSS选择器（selectors）就是把这两段分开了的代码联系起来的桥梁。

selectors {
	/* 一些样式代码 */
}

形如这样的选择器，可以选中页面中的一些元素，并告诉浏览器，要对它所选中的元素进行样式设定，而要设定的样式属性，正是大括号里的代码所决定的。

有了选择器，当设计师想要修改元素的样式时，便可以不用去找到网页代码中这些元素的具体位置，甚至也无需关心网页中的具体内容，只需在CSS中提前定义好各种元素的样式即可。

在一些网站和APP中的主题换肤或是个性装扮等功能，其实就是保持页面结构和内容不变的情况下，仅仅修改对应元素的样式代码而实现的。

聊天气泡、主题装扮等功能，其实就是保持页面结构和内容不变的情况下，仅仅修改样式
聊天气泡、主题装扮等功能，其实就是保持页面结构和内容不变的情况下，仅仅修改样式

选择器可以带来的另一个好处是，可以消除大量没必要的重复代码。

比如，在上节课的最后，我们遗留了下面这段代码：

<div style="font-size: 0.9em; font-family: STSong, SimSun">
  标签：
  <a href="#" style="background-color: lightgray">写景</a>
  <a href="#" style="background-color: lightgray">登楼</a>
  <a href="#" style="background-color: lightgray">唐诗三百首</a>
  <a href="#" style="background-color: lightgray">哲理</a>
  <a href="#" style="background-color: lightgray">黄河</a>
  <a href="#" style="background-color: lightgray">场景</a>
  <a href="#" style="background-color: lightgray">励志</a>
  <a href="#" style="background-color: lightgray">景色</a>
  <a href="#" style="background-color: lightgray">山水</a>
  <a href="#" style="background-color: lightgray">数字</a>
</div>

这段代码中的所有a元素，都有相同背景色background-color，却重复写了这么多遍，实在是太低效太「丑」了。

如果可以通过某种选择器，将它们一次性选出来，就可以直接在style标签中一次性的进行设定，消灭掉这些重复的代码。

selectors {
	background-color: lightgray;
}

更好的是，如果未来要再次修改样式，只需修改这一处的代码即可，真的是方便多了。

所以本节课，就让我们一起找到最合适的那个选择器吧！

为了不影响之前已经生效的代码，建议再复制一下上节课peom2.html为poem3.html，在新文件中改造它。

元素选择器

既然要处理的都是a元素，我们自然想到了上节课中提到的元素选择器。

回顾一下，在上节课中，我们使用了下面这一段CSS代码，将页面中的所有a元素的下划线去掉了，并且把颜色改为淡天蓝色。

a {
  text-decoration: none;
  color: lightskyblue;
}

在第一行的写在大括号前的a就是元素选择器，在这段代码中，选中了页面里的所有a元素。

元素选择器是最简单的一种选择器，只需要写明我们要选中的元素的标签名，即可一次性的将所有该标签的元素选中。

让我们在poem3.html中再体验一下元素选择器，选中h1元素，并将字号修改为20px。

h1 {
  font-size: 20px;
}
标题字号调小之后，看起来和谐多了
标题字号调小之后，看起来和谐多了

元素选择器简单方便的同时，也有很大的弊端：它一定会选中页面中全部的某个元素，无法只对其中的一部分进行设定。

所以，如果我们把对background-color的设置也放到a选择器中：

a {
  text-decoration: none;
  color: lightskyblue;
  background-color: lightgray;
}

简化后的HTML部分代码如下：

<div style="font-size: 0.9em; font-family: STSong, SimSun">
  标签：
  <a href="#">写景</a>
  <a href="#">登楼</a>
  <a href="#">唐诗三百首</a>
  <a href="#">哲理</a>
  <a href="#">黄河</a>
  <a href="#">场景</a>
  <a href="#">励志</a>
  <a href="#">景色</a>
  <a href="#">山水</a>
  <a href="#">数字</a>
</div>

看一下效果：

文章作者也出现了背景色
文章作者也出现了背景色

代码简化后，标签这部分确实保持了原本的样式。但是文章作者处的超链接因为也是a元素，不幸也被选中，也被设置了背景颜色，这不是我们想要的效果。

类选择器

为了区分这两种不同的a元素，我们可以对它们进行分类，并使用元素的class属性，来标记它所属的类型。

比如，我们定义作者这里的超链接是author类型，文章标签的超链接是label类型，并写到class属性里。

<div style="font-size: 0.9em; color: gray">
  【作者】
  <a class="author" href="https://baike.baidu.com/item/王之涣">王之涣</a>
  【朝代】唐
</div>
<!-- 此处省略部分代码 -->
<div style="font-size: 0.9em; font-family: STSong, SimSun">
  标签：
  <a class="label" href="#">写景</a>
  <a class="label" href="#">登楼</a>
  <a class="label" href="#">唐诗三百首</a>
  <a class="label" href="#">哲理</a>
  <a class="label" href="#">黄河</a>
  <a class="label" href="#">场景</a>
  <a class="label" href="#">励志</a>
  <a class="label" href="#">景色</a>
  <a class="label" href="#">山水</a>
  <a class="label" href="#">数字</a>
</div>

有了分类信息，便可以使用类选择器，准确的选择出我们要修改背景色的a元素。

类选择器以.开始，后面紧接着写上类型的名字，即可选中所有该类型的元素：

.label {
  background-color: lightgray;
}
不要忘了删除一下上小结中，在a元素选择器中的背景色设置噢！

看一下效果，很好！

虽然，类选择器帮我们准确的选中了想要的元素，但是从代码层面看，我们不过是把原来重复的style属性，换成class属性了，大批的重复代码又回来了！

属性选择器

如果不使用class属性，我们还可以用什么来区分这两种a元素呢？

让我们删掉class，然后再次观察一下他们的代码：

<div style="font-size: 0.9em; color: gray">
  【作者】
  <a href="https://baike.baidu.com/item/王之涣">王之涣</a>
  【朝代】唐
</div>
<!-- 此处省略部分代码 -->
<div style="font-size: 0.9em; font-family: STSong, SimSun">
  标签：
  <a href="#">写景</a>
  <a href="#">登楼</a>
  <a href="#">唐诗三百首</a>
  <a href="#">哲理</a>
  <a href="#">黄河</a>
  <a href="#">场景</a>
  <a href="#">励志</a>
  <a href="#">景色</a>
  <a href="#">山水</a>
  <a href="#">数字</a>
</div>

显然，这两种a元素的中href的值是不同的，我们要选中的这些超链接href都是#。

属性选择器正适合解决这类问题。属性选择器使用中括号包围要指定的属性和属性值，即可选中相关元素：

[href="#"] {
  background-color: lightgray;
}

虽然，看起来好像很完美的解决了问题，但这样写有一个很大的隐患：

我们之前在这里将href="#"的原因是，尚不清楚这个超链接该跳转到何处之前，临时使用#来替代。

如果我们未来知道了跳转位置，并修改了href的值，这个属性选择器岂不是就会失效么？

组合选择器

如果单一选择器没有办法精确选中我们想要的元素，CSS还提供了组合选择器，让我们可以多提供一些目标元素的特征。

比如，要选中的某一些元素在另一些元素内部时，就可以使用组合选择器选择它。

div a {
  background-color: lightgray;
}

上面这个选择器div a，使用空格将两个元素选择器分开。这是一种后代选择器，它将选中页面中所有在div内部的a元素。

页面中全部超链接都被选中了
页面中全部超链接都被选中了

再比如，要选中的某一些元素是另一些元素的直接子元素时，还可以使用子元素选择器。

body>a {
  background-color: lightgray;
}

与后代选择器不同，这个选择要求的更加严格，不但a要在body的内部，而且a得是body的直接子元素，不能差辈。

在我们目前的页面中，所有的a元素都与body之间隔了一个div，所以这个选择器无法选中任何元素。

没有超链接被选中
没有超链接被选中
组合选择器还有很多种，如兄弟选择器、邻居选择器等等，你可以通过查阅W3C的文档了解。

组合选择器不但可以组合元素选择器，也可以组合其他类型的选择器。

.label a {
  background-color: lightgray;
}

这个选择器，可以选中页面中所有class属性为label的元素内部的a元素。

以此为基础，我们便可以把HTML部分的代码再次做一下调整，把class属性写到a的父元素div上。

<div style="font-size: 0.9em; color: gray">
  【作者】
  <a href="https://baike.baidu.com/item/王之涣">王之涣</a>
  【朝代】唐
</div>
<!-- 此处省略部分代码 -->
<div class="label" style="font-size: 0.9em; font-family: STSong, SimSun">
  标签：
  <a href="#">写景</a>
  <a href="#">登楼</a>
  <a href="#">唐诗三百首</a>
  <a href="#">哲理</a>
  <a href="#">黄河</a>
  <a href="#">场景</a>
  <a href="#">励志</a>
  <a href="#">景色</a>
  <a href="#">山水</a>
  <a href="#">数字</a>
</div>

id选择器

通过设定文章标签部分的div的class属性，然后组合类选择器.label和元素选择器a，可以成功选中了我们的想要的这几个a元素。

但是class属性原本的含义是分类，在这里我们好像只是需要标记出这个div的作用，而不是要和什么别的进行分类，使用class并不是很准确。

当我们只是为页面中的某个确定的元素设定一个身份，或者说起一个独特名字的时候，我们可以使用元素的id属性。

<div id="label" style="font-size: 0.9em; font-family: STSong, SimSun">
  标签：
  <a href="#">写景</a>
  <a href="#">登楼</a>
  <a href="#">唐诗三百首</a>
  <a href="#">哲理</a>
  <a href="#">黄河</a>
  <a href="#">场景</a>
  <a href="#">励志</a>
  <a href="#">景色</a>
  <a href="#">山水</a>
  <a href="#">数字</a>
</div>

然后，使用id选择器即可准确的选中我们需要的元素。id选择器以#打头，后面紧跟着元素id的属性值即可。

#label a {
  background-color: lightgray;
}
完美解决
完美解决
我将本课程所有的代码托管在gitee上了，你可以点击这个链接，或到gitee.com上搜索弦五 网页开发入门，查看和获取本课程的全部代码。

Sign up for more like this.

Enter your email
Subscribe