一、CSS复合选择器
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。
1.1 后代选择器
普通选择器通过空格层级递进,最后一个选择器下的匹配标签都会被选中。
例子：
<style>
/* 标签p1和p2内的字体都被设置为红色 */
div div p{
color: red;
}
</style>
...
<div>
<div>
<p>我是标签p1。</p>
<p>我是标签p2。</p>
</div>
</div>
注意:
- 对于要修改的样式,采用后代选择器时写法应为:div div p,而不应该写成:div div,虽然效果相同，但是是错误写法。一旦页面复杂,其他相似结构很可能也会被设置。所以必须采用第一种写法。
- 后代选择器与子代选择器不同,不需要严格的层级嵌套关系,也就是说可以跨标签层级指定。无论跨多少个标签,只要满足样式中指定的选择器顺序就生效。
1.2 子代选择器
普通选择器通过">"符号层级递进,最后一个选择器下的匹配标签都会被选中。
例子：
注意：
- 子代选择器必须按照嵌套层级依次定位,不允许跳跃
<style>
/* 标签p1和p2内的字体都被设置为红色 */
div>div>p{
color: red;
}
</style>
...
<div>
<div>
<p>我是标签p1。</p>
<p>我是标签p2。</p>
</div>
</div>
1.3 并集选择器
普通选择器通过","并列的标签都会被选中。
例子：
<style>
/* 标签p1和p2和p3和p4内的字体都被设置为红色 */
div,span{
color: red;
}
</style>
...
<div>
<p>我是标签p1。</p>
<p>我是标签p2。</p>
</div>
<span>
<p>我是标签p3。</p>
<p>我是标签p4。</p>
</span>
1.4 交集选择器
"标签名.类名"。用的相对来说比较少,不太建议使用。
例子：
<style>
/* 设置p标签为红色 */
p.demo {
color: red;
}
</style>
<p class="demo">我是demo</p>
1.5综合练习
不修改一下代码的情况下,完成以下任务。
<body>
<!-- 主导航栏 -->
<div class="nav">
<ul>
<li><a href="#">公司首页</a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">公司产品</a></li>
<li>
<a href="#">联系我们</a>
<ul>
<li><a href="#">公司邮箱</a></li>
<li><a href="#">公司电话</a></li>
</ul>
</li>
</ul>
</div>
<!-- 侧导航栏 -->
<div class="sitenav">
<div class="site-l">左侧侧导航栏</div>
<div class="site-r">
<a href="#">登录</a>
</div>
</div>
</body>
1)链接 登录 的颜色为红色。
分析：
- 对于a标签有其特殊性,样式的无论哪种选择都必须指定a标签才会起作用。
- 对于单个标签的设置,采用子代选择器可能会更好,具有特殊。
/* 参考答案1 */
.sitenav .site-r a{
color: red;
}
/* 参考答案2 */
.site-r a{
color: red;
}
/* 参考答案3 */
.sitenav>.site-r a{
color: red;
}
/* 参考答案4 (自己推荐)*/
.sitenav>.site-r>a{
color: red;
}
/* 老师答案 */
.site-r a {
color: red;
}
2)主导航栏里面的所有的链接改为橙色。
分析：
- 对于一类(很多)标签的样式设置,使用后代选择器可能会更好。
/* 参考答案1(自己推荐) */
.nav a{
color: red;
}
/* 参考答案2 */
.nav ul a{
color: red;
}
/* 参考答案3 */
.nav ul li a{
color: red;
}
/* 老师答案 */
.nav a {
color: orange;
}
3)主导航栏和侧导航栏里面文字都是14像素并且是微软雅黑。
分析：
并列关系,使用并集选择器会更好。
/* 老师和自己的答案 */
.nva,
.sitenav {
font-size: 14px;
font-family: "微软雅黑";
}
4)主导航栏里面的一级菜单链接文字颜色为绿色。
/* 写法1(唯一) */
.nav>ul>li>a {
color: green;
}
1.6 伪类选择器
伪类常用的有如下四种：
- link /* 未访问的链接 */
- visited /* 已访问的链接 */
- hover /* 鼠标移动到链接上 */
- active /* 选定的链接 */
选择器+":"+伪类构成复合选择器。
注意:
- lvha定义的顺序不允许改变。
- 也可以只定义hover
示例：
a:link {
color: #333;
}
a:visited {
color: orange;
}
a:hover {
color: red;
}
a:active {
color: green;
}
...
<a href="www.baidu.com">百度一下</a>
更一般情况只定义hover伪类的状态:
a { /* a是标签选择器 所有的链接 */
font-weight: 700;
font-size: 16px;
color: gray;
}
a:hover { /* :hover 是链接伪类选择器 鼠标经过 */
color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */
}
1.7复合选择器总结
| 选择器 | 作用 | 特征 | 使用情况 | 用法 |
|---|---|---|---|---|
| 后代选择器 | 用来选择元素或元素组的后代 | 子孙后代都能选 | 最多 | div p { color：red;} |
| 子代选择器 | 选择作为某元素子元素的元素 | 只选亲儿子 | 较少 | .nav>p { color: red; } |
| 交集选择器 | 选择两个标签交集的部分 | 既 有 | 较少 | a:link {color: red;} |
| 并集选择器 | 选择某些相同样式的选择器 | 可以用于集体声明 | 较多 | .nav, .header {color: red;} |
二、标签的显示模式
HTML标签根据布局方式可以分为2种,块标签和行标签,它们也称块元素和行内元素。具体如下。
2.1 块级标签(block)
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。
块标签特点：
（1）总是从新行开始
（2）高度，行高、外边距以及内边距都可以控制。
（3）宽度默认是容器的100%
（4）可以容纳内联元素和其他块元素。
（5） 是一个容器及盒子，里面可以放行内或者块级元素
注意：
- 文字类块级标签，里面不能放其他块级元素。如p/h1~h6/dt/里不能放div。
2.2 行内标签(inline)
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。
行标签特点：
（1）和相邻行内元素在一行上。
（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。（a 特殊 a里面可以放块级元素 ）
注意：
- 链接标签(a)里不能放再放链接。
- 特殊情况a里面可以放块级元素。
2.3 行内块标签
在行内元素中有几个特殊的标签<img />、<input />、<td>。
特点：
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。
三种标签显示模式的区别：
| 元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
|---|---|---|---|---|
| 块级元素 | 一行只能放一个块级元素 | 可以设置宽度高度 | 容器的100% | 容器级可以包含任何标签 |
| 行内元素 | 一行可以放多个行内元素 | 不可以直接设置宽度高度 | 它本身内容的宽度 | 容纳文本或则其他行内元素 |
| 行内块元素 | 一行放多个行内块元素 | 可以设置宽度和高度 | 它本身内容的宽度 |
2.4 标签显示模式的转换
在CSS属性(properties)中的布局(layout)属性中,display属性可以对HTML标签的显示模式进行转换。最后以转换后结果的特性为准。
display属性值：
| 属性值 | 宽/高可设置 | 同行继续增加元素 |
|---|---|---|
| inline | 否 | 是 |
| block | 是 | 否 |
| inline-block | 是 | 是 |
inline:没有高度和宽度,同行可继续增加元素。
inline-block:可以设置高度和宽度,同行可以增加元素。
注意：
1)块标签转行内标签可以使用：inline和inline-block;
示例1：将两个DIV内容在一行显示,不需要设置宽度
div {
display: inline;
background-color: red;
}
<div>123</div>
<div>456</div>
示例2：三个 span,要求 150 * 150 绿色盒子,在同一行显示。
span {
display: inline-block;
background-color: green;
width: 150px;
height: 150px;
}
...
<span>1</span>
<span>2</span>
<span>3</span>
示例3：三个 a 链接 80 * 20 蓝色 盒子 要求 必须一行显示 这三个盒子。
a {
display: inline-block;
background-color: blue;
width: 80px;
height: 20px;
color: #fff;
}
<a href="#">1</a>
<a href="#">1</a>
<a href="#">1</a>
三、行高
3.1 行高定义
中文行高：两行顶线的距离称为行高。可以通过PS工具查看。
英文行高：两个基线的距离。
<img src="media/line2.png" />
3.2 行高组成
行高垂直从上到下依次为：上距离,内容高度,下距离。
3.3 行高的应用
当行高等于盒子高时,文字在盒子中就是垂直居中的。
- 如果 行高 等于 盒子高度 文字会 垂直居中
- 如果行高 大于 高度 文字会 偏下
- 如果行高小于高度 文字会 偏上
四、CSS的特性
4.1 层叠性
定义：如果同一个元素上的样式出现叠加，那么这个时候一个属性就会将另一个属性层叠掉。
比如,先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式层叠。
出现样式层叠依照两个原则,第一个为就近原则,第二个为按照优先级别高的生效。
4.1.1 就近原则
距离作用域近的,起作用。
示例：
/* 123最后为蓝色 */
p {color: red;}
p {color: blue;}
<p>123</p>
4.1.2 CSS优先级
不同的选择器对应不同的权重,权重值由(a,b,c,d)组成,权重可以做加法计算,但必须是按对应位置做加法。权重值a>b>c>d。
| 选择器名称(个) | 权重值 |
|---|---|
| 类继承/通配符* | (0,0,0,0) |
| HTML标签 | (0,0,0,1) |
| 类/伪类 | (0,0,1,0) |
| ID | (0,1,0,0) |
| 行内样式 | (1,0,0,0) |
| important | 无穷大 |
选择器对应的权重值:
| 选择器名称(个) | 权重值 |
|---|---|
| 类继承/通配符* | (0,0,0,0) |
| HTML标签 | (0,0,0,1) |
| 类/伪类 | (0,0,1,0) |
| ID | (0,1,0,0) |
| 行内样式 | (1,0,0,0) |
| important | 无穷大 |
举例:
div ul li ------> 0,0,0,3
.nav ul li ------> 0,0,1,2
a:hover -----—> 0,0,1,1
.nav a ------> 0,0,1,1
#nav p -----> 0,1,0,1
五、CSS背景属性
| background-color | 背景颜色 |
|---|---|
| background-image | 背景图片地址 |
| background-repeat | 是否平铺 |
| background-position | 背景位置 |
| background-attachment | 背景固定还是滚动 |
<end>
