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