选择器中，可以写多组样式属性，使用{}进行包裹；
多组样式之间，使用分号分隔；
样式属性与属性值之间，用冒号隔开
选择器{
属性1:属性值1;
属性2:属性值2;
}
【CSS中常用选择器】
① 标签选择器
写法： HTML标签名{}
作用：选中页面中所有与选择器同名的HTML标签。
li{
/*color: red;*/
}
②类选择器（class选择器）
* 写法： .class名{}
* 调用： 在需要应用这套样式的标签上，使用class="class名"调用选择器。
* 优先级： class选择器>标签选择器
.ji{
/*color: blue;*/
}
③ID选择器：
* 写法： #ID名{}
* 调用： 在需要应用这套样式的标签上，使用id="ID名"调用选择器。
* 优先级： ID选择器>class选择器
#two{
/*color: yellow;*/
}
/* 【class选择器和ID选择的区别】
* 1. 写法不同：class选择器用.声明，ID选择器用#声明；
* 2. 优先级不同：ID选择器>class选择器
* 3. 调用次数不同： class选择器可以调用多次； ID选择器只能调用一次(同一页面，不能出现同名ID)。
*/
④通用选择器
* 写法： *{}
* 作用： 作用于页面中所有的HTML标签；
* 优先级： 最低！低于标签选择器。
*{
/*background-color: yellow;*/
/*color: pink;*/
}
⑤并集选择器
* 写法： 选择器1,选择器2,……选择器n{} 多个选择器之间逗号分隔。
* 生效规则： 多个选择器取并集，只要标签满足其中任何一个选择器，样式即可生效
* (其实相当于多个选择器拆开写)
li,.ji{
/*color: red;*/
}
⑥ 交集选择器
* 写法： 选择器1选择器2……选择器n{} 多个选择器之间紧挨着，没有分隔
* 生效规则： 多个选择器取交集，必须满足所有选择器的要求，样式才能生效。
li.ji{
/*color: red;*/
}
⑦ 后代选择器
* 写法： 选择器1 选择器2 …… 选择器n{}
* 生效规则： 只要满足后一个选择器是前一个选择器的后代，样式即可生效（后代包括子代、孙代。。。）
div .ji{
/*color: red;*/
}
⑧ 子代选择器
* 写法： 选择器1>选择器2>……>选择器n{}
* 生效规则： 必须满足后一个选择器是前一个选择器的直接子代，样式才能生效。（两个选择之间不能有任何其他标签）
div>ul>.ji{
color: red;
}
/* 伪类: 类型选择器 */
选择第一个li类型的元素
ul li:first-of-type {
background-color: darkorchid; /* 第一个li类型的元素 */
}
最后一个li类型的元素
ul li:last-of-type {
background-color: darkorchid; /* 最后一个li类型的元素 */
}
选择第6个li类型的元素
ul li:nth-of-type(6) {
background-color: darkorchid; /* 选择第6个li类型的元素 */
}
/* 选中每个div中的第二个子元素 */
div :nth-child(2) {
background-color: lightgreen;
}
/* 选择页面中的第二个p元素 */
p:nth-of-type(2) {
background-color: yellow;
}
/* 伪类: 表单控件 */
form :enabled {
background-color: wheat;
}
/* 当在控件中输入无效值文本自动变成红色 */
form :invalid {
color: red;
}
/* 设置控件获取到焦点时的样式 */
form :focus {
background-color: lightgreen;
}
/* 设置鼠标悬停时的样式 */
button:hover {
width: 56px;
height: 28px;
background-color: black;
color: white;
}
