开发者学堂课程【零基础学前端 HTML+CSS ：CSS 选择符】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/398/detail/5130
CSS 选择符
内容介绍
一、通配符选择符
二、类选择符
三、ID 选择符
四、包含选择符
五、群组选择符
一、通配符选择符
1、通配符也叫选择器，在编写代码时，用“*”表示通配符选择器，其作用是定义页面所有元素的样式。
2、在命名的时候，大括号是写元素的内容，元素之前会有很多前缀，就是写命名的位置，发现有的时候是一点命名的有时候是什么都没写，直接写了一个 ATM 的标签，还有写 sharp 是一个#号，这些都是 ID 的明细，这些都是前面不同的叫做选择符，根据不同的选择符可以筛选出不同的标签，针对于不同的页面去用，第一种就是通配符选择器，选择器和选择符的区别就在于*，*在 dos 命令里面在编程里面就代表的是全部，所有的概念，用*大括号里面写出的元素。
*{margn:0px;
padding:0px; j
比如xxxx，这里面的所有元素就是对当前谁引用了这个内容，这个网页里的所有内容都管用，比如下课了，所有人都下课了，比如张三可以出去，针对的是张三，*代表所有人，所有人都出去，这就代表*，下面写元素，这就叫选择，有很多种选择。
3、样式表加载总结
（1）内嵌样式
直接在页面的标签里加
<div style=”border:1px red solid;" >测试信息</div>
（2）内部样式表
在 head 部分加入
<style type="text/css" > div{margin: 0;padding: 0;border:1px
red solid;}</style>
（3）链入外部样式表
在 head 部分加入
<link rel= "stylesheet" type= "text/css'
href= " my.css" media="all" /> ,引入外部的 CSS 文件
（4）导入外部样式表
在 head 部分加入
<styletype= "text/css"> @import url(my.css); </style>
样式表有很多种，但是在做之后演示的时候就选择内部样式表，因为是链接要经常切换页面，经常在上个页面写，再回到这页面做，很麻烦，所以就会在内部样式在这一个网页里边，写 style 这种样式去做练习。
4、演示：通配符选择器（*）
写上 style 的标签，/style ，这代表中间要写样式，*，输入 font-size，文字的大小，比如30px，再写一个颜色，是写一个红色，所以写了一个*，写一个文字大小，红色，代表网页应用的所有的元素，文字大小都是要30像素，文字是红色，所以在这页面里面不管是直接写一个测试内容还是把它放到这个 div 里面，运行一下。
<!DOCTYPE html>
<html>
<head lang = “en”>
<meta charset = “UTF-8”>
<title></title>
<style>
*{
font-size: 30px;
color: red;
}
</style>
</head>
<body>
测试内容1
<div>测试内容2</div>
<body>
<html>
运行结果：测试内容1和测试内容2不管是否写入 div 内显示的都是红色、32px。说明*元素是属于通配符，在所有网页中均有效。应用于网页中所有元素均需要修改，都要去改的时候才去用才会应用，案例里写了一个 margin 为0，padding 等于0，讲盒子模型的时候，就知道这两个属性都是什么，案例的意思相当于格式化，把所有的网页里边内容，但是用的不是很多。
二、类选择符
1、类选择符通过直接引用元素中类属性的值而产生效果，这个应用前面总是有一个句点"."，这个句点用来标识一个类选择符，类名可以随意命名，但最好根据元素的用途来定义一个有意义的名称。
2、类选择器也可以叫做选择符，开头命名是.选择器名称{样式}。
3、在 HTML 需要用 class = 名称引用，这个比较重要，比如起了一个名字，叫张三，没有人去叫张三，也没有用，比如这屋来了一个张三，但是没有人叫他，他也不知道，所以需要针对哪一个元素去引用它。
4、示例：类选择符
<!DOCTYPE html>
<html>
<head lang = “en”>
<meta charset = “UTF-8”>
<title></title>
<style>
*{
font-size: 30px; 这是通配符
color: red;
}
.font_green{color: green;} 英文的. 起一个绿色的文字的名字，在起名的时候尽量不要起没关系的名字，有关系以后在引用的时候看见了文字绿色就知道这肯定是跟文本有关的一个绿色的文字，也并不是起名字必须这么写，起名字a1B1做练习无所谓，但是在实际工作当中，起一堆 a1B1 会混乱的，所以起名字自己一定要记得住，每个公司有每个公司命名的规则，按照这个规则命名即可。
</style>
</head>
<body>
测试内容1
<div>测试内容2</div>
<div class = “font_green”>测试内容3</div>
<body>
<html>
运行结果：测试内容1和测试内容2不管是否写入 div 内显示的都是红色、32px。测试内容3为绿色、32px。因为 class 单独为这个标签测试3的标签，一个是div标签和一个没放 div 的标签里面，它都按照*的通配符的样式指派了，但是字体没变，颜色变了，样式表本身是有继承性的，继承性也有优先级别。*是优先级别最低的，class 优先级别中等的，还有一个优先级最高的是专门针对某一个 ID 做的，
前面命名一定要是以点为命名，后面 html 需要以 class 名称来引用，一个在样式里面能不能有多个 div 引用的一个点，类的样式，这肯定是没有问题的，比如把就不单写了，就把 font_green 复制到上面测试2里面，刷新就变成一个红的加上两个绿的，所以写这么一个样式，可以被多个内容引用，这个就叫类的选择符。
三、ID 选择符
1、ID 选择符与类选择符极其相似，类选择符是以“."开头，而 ID 选择符是以“#”开头。对于一个 HTML 文档来，一个空白的链接，一个空链接，但是它本身又是链接，在 css 里面它是一个 ID 选择器，其中的每一个标签都可以使用id = ""的形式进行一个名称指派，但需要注意，在一个 HTML 文件中 id 是具有唯一性是不可以重复的。
#font-red {color:red;}
<div id="font-red">红色字体</div>
2、ID 选择器用#来开头，区别于的类选择器的 . 。
3、在应用的时候需要标签里边 id 名称来关联，就是先有的 ID 名称要跟名字一样。需要注意 ID 不要有重名的，因为 ID 的名称一般是跟着脚本的，所以在一个页面里面不要有重名的 ID，叫一个名的肯定会出现问题，所以一般是是不重名，所以叫 ID，一般 ID 是一个名称的指派，需要注意的它是一个不可重复的，重复了肯定会出问题的。
如果指派两个 ID 都叫这名肯定是有问题，一般都是跟 Java 脚本走的，以后的JavaScript 脚本都是认 ID 名的，在样式表里面也是一样。从写的状况是看不出太多的样式区别。但是它就直接为这一个对象进行指派，优先级别是不一样的。输入两个 div，一般情况是先写 ID，后写样式。
代码如下：
<!DOCTYPE html>
<html>
<head lang = “en”>
<meta charset = “UTF-8”>
<title></title>
<style>
*{
font-size: 30px;
color: red;
}
.font_green{color: green;}
#top {
width:500px; 500像素
height:30px; 30像素
background:#000000; 颜色
}
<div id="font-red">红色字体</div>
</style>
</head>
<body>
测试内容1
<div>测试内容2</div>
<div class = “font_green”>测试内容3</div>
<div id = “top”></div>
<body>
<html>
刷新之后出现500*30 px的黑色框，值得注意的是 ID 的优先级别是最高的。
四、包含选择符
1、如果用户想对某个对象中的子对象进行样式指派，包含选择符就能发挥了作用。包含选择符又称为后代选择符，因为该选择符是作用于某个元素中的子元素的，且不仅限于两层标签元素。
2、包含选择符是一个 HTML 标签包含另外一个标签。
3、在样式里面输入
body {
background:#00ff00;
}
刷新整个的页面就变成了绿色。
HTML 选择器把 HTML 标签当作选择器的名称，所有被指派的 HTML 标签都改变自己的属性。
如果把 body 变成 tr，tr 是表格的行，再刷新发现背景没了，因为只是指派了表格的行，如果在网页中出现了 table，tr 是透明的，输入 td 背景变换了，再刷新，这个表格在建立之初，背景颜色就已经改变了。是因为用 HTML 选择器改变了它本身的含义。
通配符是*，类标签是.，ID 是#，HTML 前面什么都没有，空的，直接写 HTML 标签。包含选择符经常会被嵌套.
例：
<title>包含迭拝符</title>
<style type="text/css">
h1 span{
foht-size:18px;
font -weight :bold;
color:#F00;
}
</style>
</head>
<body>
<h1>这里是単独的 h1 元素内容</h1>
<span>这里是単独的 span 元素内容</ span>
<hi>这里一段文本内容，其中<span>这里是被 p 标签包含的 span 标签的内容</span></h1>
</body>
</html>
第二行变粗了，是因为h1标签，h1是最大标题，本身就变粗，span 标签没变，还是按照默认值，h1嵌套下的 span 改变了，变成h1下的 span。除了这种还有父类子类继承的标签，假如h1下还有一个h2，那就是它h1下的子类，还有大于号，就一级，也是h1下的 span，
代码如下：
<!DOCTYPE html>
<html>
<head lang = “en”>
<meta charset = “UTF-8”>
<title></title>
<style>
*{
font-size: 30px;
color: red;
}
.font_green{color: green;}
#top {
width:500px;
height:30px;
background:#000000;
}
tr{
background:#00ff00;
}
h1 span{
font-size:50px:
color: blue;
}
</style>
</head>
<body>
测试内容1
<div>测试内容2</div>
<div class = “font_green”>测试内容3</div>
<div id = “top”></div>
<table>
<tr>
<td>背景变换了</td>
<tr>
</table>
<h1>H1改变了吗？</h1>
< span >span改变了吗？</span>
<h1>
<span>改变了吗？</span>
</h1>
<body>
<html>
运行结果：h1下的 span 发生了改变。
五、群组选择符
1、群组选择符使用逗号对选择符进行了分隔，这样书写的优点在于同样的样式只需要书写一次，减少了代码量，有利于改善 CSS 的代码结构。
2、群组选择符，名称与名称之间用逗号分开（名称，名称）。
创建 css6.html，输入 style 标签，在页面里面加入 div 和 /div，在里面有三个 div，分别是测试1，测试2，测试3，需求是想让三个div宽高都一样，颜色不同，class a1，class a2，class a3，写入宽高背景颜色，复制a2，a3，红绿蓝，刷新，500*500 的三个块。
但是现在的代码很复杂，比较累，所以把宽高都删掉，在最前面写一个通用的内容宽高，用通配符的方式，但是不能用*，因为不能把页面中的所有内容都改变了，不能用 table，也不能用 div，不能把页面里的所有东西都用，所以在一个页面当中用通配符来改变。这就是群组选择符。
代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.a1,.a2,.a3{
width:300px;
height:300px;
}
.a1{
background-color: red;
}
.a2{
background-color: green;
}
.a3{
background-color: blue;
}
</style>
</head>
<body>
<div calss = “a1”>测试1</div>
<div calss = “a2”>测试2</div>
<div calss = “a3”>测试3</div>
</body>
</html>
运行结果为三个不同颜色的条形块。
