开发者学堂课程【前端开发CSS基础：css 选择器（上）】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/361/detail/4255
css 选择器（上）
内容介绍：
一、元素选择符
二、关系选择符
选择符又称选择器，定义了将影响文档中的哪些部分，选择符包括元素选择符，关系选择符，属性选择符，伪类选择符，伪对象选择符。
一、元素选择符
1、通配符:*{}
在代码中应用：
首先创建一个 html 文件，命名为 index ，再写入一个 css 文件，命名为 css ，此时以外部样式的方式引入资源文件，类型为样式表，首先写一个 div 标签，写入通配符，比如通过一个*让所有背景颜色都变成蓝色，此时执行看一下效果，大背景都变成了蓝色。
如果再写入几个标签给它内容，再执行看效果。它们的背景都变成了蓝色，所以这个操作一般被用来初始化操作，浏览器默认是有一点点边距的，比如 haha 这个距离左边有一点边距，距离上边也有一定的边距。
所以通常会利用通配符来把内边距设置为 0，外边距也设置为 0，这两个属性就是设置边距的，执行查看效果。
*{
padding:0；
margin:0；
}
此时可以看到上边和左边都没有边距了，所以通配符会被用作初始化，初始化也不只是设置边距，也可以设置字帖样式，比如 font-family 设置成微软雅黑，字体大小设置为 20px ，刷新看效果。
2、类选择符:.类名称{}
英文小圆点加类名称，给 p 标签添加一个类名称，首先使用 class 为其添加一个名称 hp，选中它英文小圆点加 hp 花括号，颜色变成绿色，执行查看效果。变成了绿色。
3、id 选择符:#id 名称{}
它类似于类选择符，只是从英文小圆点换成#，此时想给 span 标签添加一个英文名称，首先 id 设置成 hs ，选择它 # 加 id 名称，颜色变成紫色，执行查看效果。
4、类型选择符(标签选择符）∶标签{}
写入一个 ul 标签，li 标签给它一个内容，多复制几个，元素名称li花括号，给它一个颜色红色。
以上这些就是元素选择符。
完整代码如下：
< ! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css.css" type="text/css"/>
< /head>
<body>
<p class="hp">haha</p>
<span id="hs">hehe< /span> I
<ul>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
</ul>
< /body>
< /html>
*{
font- family: "微软雅黑;
font-size: 20px;
}
.hp{
color: green;
}
#hs{
color: blueviolet;
}
Li{
color: red;
}
二、关系选择符
1、子元素选择器:父亲>儿子
不包括它的孙子。
2、兄的选择器∶你自己~你的兄弟
就是选择跟它同级别的标签。
3、相邻选择器: E+F
就是选择它同级别的相邻的元素。
4、包含选择器: EF
就是包括它所有的子元素，包括它孙子以及孙子的孙子。
5、在代码中应用：
（1）兄弟选择器
输入 p～p 兄弟，选择颜色 brown，执行之前先看那个元素可以变色，因为选择的是 p 到 p 兄弟，所以 <p> 这是一个文字段落 </p>、
<p> 这是一个文字段落 </p> 这两个 p 标签都会变色。
此时将 p 变成 h3 ，执行可以看到第一个 p 标签并未变色，因为文档加载是有一定顺序的，它是从上到下依次加载的，它后面是可以对应的，但是它上面不可以，因为它只能往下走，所以使用兄弟选择符的时候应该注意两点，第一点它本身并不起作用，第二点它对向上的元素没有效果。
（2）相邻选择器
它的语法是元素加元素，它的作用域是选择紧贴在E元素后的F元素。此时选择是紧贴在 p 元素后的 p 元素，改变颜色红色。所以第三行 <p> 这是一个文字段落</p> 和最后一行 <p> 这是一个文字段落 </p> 可以变色。
（3）包含选择器
包含选择器是用一个空格分开，它选择所有的E元素包含的 F 元素及其子元素。此时可以看到 ul 标签里面嵌套了一些li标签，用包含选择器选择 ul 标签里所有的 li 标签元素，将其颜色都变成蓝色。
< ！DOCTYPE html>
<html lang= "en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css.css" type="text/css"/>
< /head>
body>
<ul>
<li>列表项目</li>
<li>
<ul>
<li>列表项目</li>
<li>列表项目</li>
<li>列表项目</li>
<li>列表项目</li>
</ul>
</li>
<li>列表项目</li>
<li>列表项目</li>
</ul>
< /body>
< /html>
Ul li{
color:blue;
}
所以包含选择器它不仅选择 E 元素包含的 F 元素，同时也选择 F 元素的子元素，而子元素选择器只选择被 E 元素包含的 F 元素，并不包含 F 元素的子元素。
