八、CSS复合选择器
8.1.后代选择器 重要
后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
元素一 元素二 {样式声明}
/* ol里面的li改为pink */
ol li {
color: pink;
}8.2.子选择器 重要
子元素选择器（子选择器）只能选择作为某元素的最近一级子元素
元素1 >元素二 {样式声明}
.nav > a {
color: pink;
}8.3.并集选择器
并集选择器可以选择多组标签, 同时为他们定义相同的样式，通常用于集体声明。并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分。
元素1，元素二{样式声明}
/* 熊大熊二为粉色1，小猪一家为粉色 */
div,
p,
.pig li {
color: pinksss;
}
/* 约定的语法规范，用逗号隔开，最后一个不需要，我们并集选择器喜欢竖着写 */8.4.伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素
伪类选择器书写最大的特点是用冒号（:）表示，比如 :hover 、 :first-child 。
a:link 没有点击过的(访问过的)链接
a:visited 点击过的(访问过的)链接
a:hover 鼠标经过的那个链接
a:active 鼠标正在按下还没有弹起鼠标的那个链接
8.5.链接伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素
/* 未访问的链接 a:link 把没有访问的链接选出来 */
a:link {
color: #333;
text-decoration: none;
}
/* a:visited 选择点击过的链接 */
a:visited {
color: orange;
}
/* a:hover 选择鼠标经过的那个链接 */
a:hover {
color: rgb(112, 187, 237);
}
/* a:active 选择的是我们鼠标正在按下还没有叹气鼠标的那个链接 */
a:active {
color: green;
}实际在开发中的写法
/*a是标签名 所有的链接*/
a {
color: gray;
}
/*:hover 鼠标经过变色*/
a:hover {
color: red; /*鼠标经过 由灰色变成红色*/
}8.6.:focus 伪类选择器
:focus 伪类选择器用于选取获得焦点的表单元素。
焦点就是光标，一般情况 类表单元素才能获取
input:focus {
background-color: #a1dfe7;
color: pink;
}九、元素显示模式的分类
9.1.块元素
- 常见的块元素
- div最常用啦
💡💡
<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>块级元素的特点：
- 自己独占一行。
- 高度，宽度、外边距以及内边距都可以控制。
- 宽度默认是容器（父级宽度）的100%。
- 是一个容器及盒子，里面可以放行内或者块级元素。
- 文字类的元素内不能放块级元素
9.2.行内元素
- 常见的行内元素
💡💡
<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>行内元素的特点：
- 相邻行内元素在一行上，一行可以显示多个。
- 高、宽直接设置是无效的。
- 默认宽度为自身宽度
1.3.行内块元素
- 常见的行内块元素
💡💡
<img />、<input />、<td>行内块元素的特点：
- 和相邻行内元素在一行上，但是他们之间会有空白缝隙。
- 一行可以显示多个
- 默认宽度就是它本身内容的宽度。
- 高度，行高、外边距以及内边距都可以控制
9.4.元素显示模式的转换
一个模式的元素需要另外一种模式的特性
💡💡转换方式：
转换为块元素：display:block;
转换为行内元素：display:inline;
转换为行内块：display: inline-block;