6. 选择器的使用

Posted 2020-11-18 yunxiansheng

我们可以通过行内样式、内部样式、外部样式这些方式实现在html中使用CSS，但是CSS中的样式是如何和具体的HTML标签产生关系的呢？这就是选择器的功能，在CSS中提供了很多选择器，在这里我们总结了一些最常见的选择器，另外，我们按照这些选择器的复杂程度分为基础选择器和复合选择器。

基础选择器

 1 /* ID选择器 */
 2 #id_selector{
 3     color: red;
 4 }
 5 /* 类选择器 */
 6 .class_selector{
 7     color: green;
 8 }
 9 /* 标签选择器 */
10 p{
11     font-size: 24px;
12 }
13 /* 通配符选择器 */
14 *{
15     background-color: pink;
16 }
17 /* 属性选择器 */
18 [class]{
19     font-weight: bolder;
20 }

如上是一些最简单的选择器，包括ID选择器、类选择器、标签选择器、通配符选择器、属性选择器，在这里我们需要注意关于这些选择器的格式。这些选择器的范围作用范围是什么呢？具体内容如下：

ID选择器，ID是HTML页面中唯一标识，和ID名称相同的标签采用其中的样式。

类选择器，类可以被多个标签使用，和类名相同的标签采用其中的样式。

属性选择器，标签中有指定属性的标签会采用其中设置的样式。

标签选择器，所有HTML中指定的标签名称采用其中设置的样式。

通配符选择器，所有HTML代码都会采用其中设置的样式。

这些选择器中常用的就是ID选择器、标签选择器、类选择器，而属性选择器并不常用，通配符选择器一般都不建议使用。除了上边介绍的这些选择器外，还有一类特殊的选择器，即伪类选择器，它通常被用来修饰网页中的链接，可以在链接未点击、点击、鼠标浮动、点击后的不同阶段设置样式，关于它的操作如下所示：

 1 /** 链接没有被访问时的样式 */
 2 a:link{
 3     color: red;
 4     font-size: 24px;
 5     text-decoration: none;
 6 }
 7 /** 链接被访问后设置的样式 */
 8 a:visited{
 9     color: grey;
10 }
11 /** 鼠标浮在链接上时的样式 */
12 a:hover{
13     color: yellow;
14     font-size: 24px;
15     text-decoration: none;
16 }
17 /** 链接被点击时设置的样式*/
18 a:active{
19     color: blue;
20     font-size: 24px;
21     text-decoration: none;
22 }

我们需要注意伪类选择器在设置的时候必须采用上边我们的这个顺序，不能颠倒，这点需要我们特别注意。

复合选择器

 1 /* 后代选择器 */
 2 /*匹配.div_1标签内部所有的.div_2标签*/
 3 .div_1 .div_2{
 4     font-family: "华文琥珀";
 5 }
 6 
 7 /* 子选择器 */
 8 /*匹配父标签为.div_4的所有.div_5标签*/
 9 .div_4 > .div_5{
10     font-family: "华文行楷";
11 }
12 
13 /* 相邻选择器 */
14 /*匹配紧邻.div_7标签之后的所有.div_8标签*/
15 .div_7+.div_8{
16     font-family: "华文彩云";
17 }
18 
19 /* 并集选择器 */
20 /*匹配所有.div_9标签和.div_10标签*/
21 .div_9,.div_10{
22     font-family: "华文行楷";
23 }
24 
25 /* 交集选择器 */
26 /*匹配所有<div>标签的类属性是div_11的标签*/
27 div.div_11{
28     font-family: "华文行楷";
29 }
30 /* 交集选择器，虽然有效，但是没有实际的意义，因为ID是唯一的*/
31 div#div_11{
32     font-family: "华文彩云";
33 }

如上就是我们总结的一些复合选择器，在这里我们在代码的注释中描述了具体的选择器作用范围，我们需要掌握这些选择器的格式和作用范围。