03-CSS的复合选择器和CSS的元素显示模式

1. CSS 复 合 选 择 器

1.1 复 合 选 择 器

复合选择器是建立在基础选择器之上的，对基本选择器进行组合形成
复合选择器可以更准确，更高效的选择目标元素（标签）
复合选择器是由两个或多个基础选择器通过不同的方式组合而成的
常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器

1.2 后 代 选 择 器

后代选择器：可以选择父元素里面子元素
写法：把外层标签写在前面，内层标签写在后面，中间用空格分隔
当标签发生嵌套时，内嵌标签就成为外层标签的后代

语法：

元素2 可以是儿子可以是孙子，只要是元素1 的后代即可

ul li { 样式声明 }   # 选择 ul 里面所有的 li 标签元素

1.3 子 选 择 器

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素，即亲儿子元素

元素1 > 元素2 {样式声明}   #表示选择元素1 里面的所有直接后代（子元素）元素2

• 元素1 和元素2 中间用大于号隔开
• 元素1 是父级，元素2是子级，最终选择的是元素2
• 元素2 必须是亲儿子，其孙子、重孙之类的都不行

1.4 并 集 选 择 器

并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明
并集选择器是各选择器通过英文逗号链接而成的，任何形式的选择器都可作为并集选择器的一部分

元素1, 元素2 {样式声明}   #选择元素1和元素2

• 元素1 和元素2 中间用逗号隔开
• 逗号可以理解为和的意思
• 并集选择器通常用于集体声明

1.5 链 接 伪 类 选 择 器

• a:link #选择所有未被访问的链接
• a:visited #选择所有已被访问的链接
• a:hover #选择鼠标指针位于其上的链接
• a:active #选择活动链接（鼠标按下未弹起的链接）

为了确保生效，请按照 LVHA 的顺序声明 ：link visited hover active

实际工作中的写法：

/* a是标签选择器  所有的链接 */
a {
    color: gray;
}
/* :hover 是链接伪类选择器 鼠标经过 */
a:hover {
    color: red;    /* 鼠标经过时，由原来的灰色 变成了红色 */
}

1.6 : focus 伪 类 选 择 器（主要针对 input 类表单元素）

: focus 伪类选择器用于选取获得焦点的表单元素

焦点是光标，一般情况 <input> 类表单元素才能获取的，因此这个选择器也是针对表单元素来说

input:focus{
    background-color:yellow;
}

2. CSS 的 元 素 显 示 模 式

HTML 元素一般分为块元素和行内元素两种类型。

2.1 块 元 素

常见的块元素有<h1>~<h6>、 <p>、<div>、<ul>、<ol>、<li>等，其中<div>是最典型的块元素。

块元素的特点：

• 自己独占一行
• 高度、宽度、外边距以及内边距都可以控制
• 宽度默认是容器（父级宽度）的100%
• 是一个容器及盒子，里面可以放行内或块级元素

注意：

• 文字类的元素内不能使用块级元素
• <p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>
• 同理，<h1>~<h6>都是文字类块级标签，不能放其他元素

2.2 行 内 元 素

常见的行内元素有 <a>、 <strong>、<b> 、<em> 、 <i> 、<ins> 、<u> 、<span>等，其中<span> 标签是典型的行内元素（内联元素）

行内元素的特点：

• 相邻行内元素在一行上，一行可以显示多个
• 高、宽直接设置是无效的
• 默认宽度就是它本身内容的宽度
• 行内元素只能容纳文本或其他行内元素

注意：

• 链接里面不能再放链接
• 特殊情况链接<a> 里面可以放块级元素，但是给<a> 转换一下块级模式最安全

2.3 行 内 块 元 素

在行元素中有几个特殊的标签：<img/> 、<input/>、<td>，他们同时具有块元素和行内块元素的特点。

行内块元素的特点：

• 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙，一行是可以显示多个
• 默认宽度是它本身内容的宽度（行内块元素特点）
• 高度、行高、外边距以及内边距都可以控制（块级元素特点）

2.4 元 素 显 示 模 式 转 换

特殊情况下，我们需要元素模式的转换，即一个模式的元素需要另一个模式的特性

如：要 增加链接<a> 的触发范围

• 转换为块元素：display:block
• 转换为行内元素：display:inline
• 转换为行内块：display:block