【融职培训】Web前端学习第2章网页重构5 css选择器进阶

一、更多的选择器

上一节我们已经掌握了常用css选择器和css的一些常用属性，本节我们进一步扩展css选择器的内容包括内容如下：

层级选择器
组合选择器
伪类选择器
伪元素选择器

层级选择器

找到指定html元素内的某个元素:

1 .sport li{
2     color:red
3 }

同上面的选择器 .sport li，可以选择class为sport元素内部所有的li标签。在上一节我们讲解过，尽量不要单独使用元素选择器来定义元素样式，但是如上所述，配合class选择器组成一个层级选择器，这样就可以更便捷、高效第使用元素选择器了。

组合选择器

组合选择器可以将多个选择器用逗号分隔开，进而定义将多个选择器选择的元素定义为相同的样式，例如下面的示例，可以将class属性为info1和info2的所有元素定义字体颜色为红色。

1 .info1,.info2{
2     color:red;
3 }

伪类选择器

此前我们学习的所有选择器都是静态的定义某些元素的样式，通过伪类选择器，我们还可以为元素添加一定的行为，这里讲解最常用的伪类选择器:hover，当鼠标悬浮在某个元素上时，为其设置样式，示例代码如下所示：

1 .box:hover{
2     background-color: red;
3 }

伪元素选择器

伪元素选择器可以使用css为网页添加额外的元素。

::before：伪元素选择器，在每个内容之前插入内容
::after：伪元素选择器，在每个内容之后插入内容

示例代码如下所示

1 h1::before{
2     content:"before";
3     border:1px solid red;
4 }
5 h1::after{
6     content:"after";
7     border:1px solid blue;
8 }

选择器总结

在css3版本之前，伪类选择器和伪元素选择器都是一个冒号，css3的语法中，为了让伪类选择器和伪元素选择器有所区分，在伪元素选择器前又增加了一个冒号，编程了两个冒号。当时css3是完全兼容此前的css版本的，所以大家在开发的过程中，可能会遇到只有一个冒号的伪元素选择器，虽然可以正常使用，但是这是过时的语法，大家在开发的过程中尽量使用css3的新语法，使用两个冒号。

虽然css还有很多很多选择器我们并没有讲解，但是目前学习的选择器基本可以应付95%以上的开发工作了，在学习的过程中，建议大家先熟悉这些选择器并灵活运用，日后的工作中如果遇到需要其他选择器才能应付的需求，到时直接看文档查阅其他选择器，基本可以分分钟搞定所遇到的问题。

二、选择器权重

class选择器与id选择器权重对比

到目前为止我们已经可以熟练掌握css选择器了，但是考虑一个问题，如果两个不同的选择器都找到了同一个元素，并且设置不同的样式，那么这个元素的样式应该被哪个选择器所指定呢，这就涉及到了选择器权重的问题，示例代码如下所示。

 1 #content{
 2     width:100px;
 3     height:100px;
 4     background-color: #0f0;
 5 }
 6 .box{
 7     width:100px;
 8     height:100px;
 9     background-color: #f00;
10 }

在代码中，我们使用class选择器将div定义成红色，用id选择器将元素定义为绿色，最终元素为id选择器设置的样式，可以看出id选择器的权重大于class选择器的权重。这里大家应该记住，id选择器权重最大，其次是class选择器，最后是元素选择器。再看下面的例子。

 1 .box1{
 2     width:100px;
 3     height:100px;
 4     background-color: #0f0;
 5 }
 6 .box2{
 7     width:100px;
 8     height:100px;
 9     background-color: #f00;
10 }

在上面的代码中，我们使用两个class选择器定义一个div，最终div的样式被第二个选择器设置，这是因为两个选择器权重如果相同，最后面的选择器设置的内容会覆盖前面的内容;

选择器权重计算方法

在css中，id选择器的权重是100，class选择器的权重是10，元素选择器的权重是1，数值越大，权重越大，如果是放在层级选择器中，可以把层级选择器拆分成多个选择器权重的值，然后相加计算总权重值，例如下面的选择器

 1 #container .box ul li{
 2     /* 
 3         id：100
 4         class:10
 5         ul:1
 6         li:1
 7         总和:112
 8      */
 9 }
10 .container .box li{
11     /* 
12         class:10
13         class:10
14         li:1
15         总和:21
16      */
17 }

如果上面两个选择器同时选择一个元素，那么第一个选择器设置的样式会被使用，因为其选择器权重值为112，大于下面选择器的权重值21。

其他引入css的方法

此前我们编写的css样式都写在head标签的style标签内，此方法我们称作【嵌入样式】，除了嵌入样式外，还有两种方法来设置css样式

内联样式
外部样式

外部样式实例代码如下所示

 1 <!-- index.html文件 -->
 2 <!DOCTYPE html>
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Document</title>
 7     <link rel="stylesheet" href="index.css">
 8 </head>
 9 <body>
10     <h1>hello world</h1>
11 </body>
12 </html>

1 /* index.css文件 */
2 h1{
3     color:blue;
4 }

内联样式实例代码如下

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <h1 style="color:yellow">hello world</h1>
 9 </body>
10 </html>

内联样式仅仅只是设置了一个html标签的样式，因此，随着网页内容的增加，这设置样式的方式不仅增加了css代码量，而且难以维护，所以我们不要使用此方法设置样式。

嵌入样式写在html文件中，随着网页内容的增加，会显得html文件过于臃肿，所以也不推荐使用这种方式。

从现在开始，我们编写的所有样式，都要使用外部样式。

关于三种样式的优先级，内联样式优先级最高，嵌入样式和外部样式如果权重相同，后面的样式会覆盖前面的样式。

!important

通过在样式的结尾设置!important，可以将此样式优先级设置为最高，实例代码如下所示：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         h1{
 8             color:red !important;
 9         }
10     </style>
11 </head>
12 <body>
13     <h1 style="color:yellow">hello world</h1>
14 </body>
15 </html>

在上面的代码中，网页中的字体仍然是红色，因为!important优先级高于内联样式。

课后练习

优化上一节课后练习的代码，要求如下：

使用层级选择器让所有样式都在.container的下级
使用link标签引入外部样式
去掉列表元素之前的点，并且将列表设置为红色字体。

【融职教育】在工作中学习，在学习中工作

来源：oschina

链接：https://my.oschina.net/u/4125915/blog/4309050

标签

RED

Solid

【融职培训】Web前端学习 第2章 网页重构5 css选择器进阶