css复合选择器

• 后代选择器
• 子选择器
• 并集选择器
• 伪类选择器

后代选择器

后代选择器又称为包含选择器，可以选择父元素里的子元素。写法是将外层标签写在前面，内层标签写在后面，中间 空格分开。

选择元素 1 里面所有的元素 2

1

元素1 元素2 { 样式声明; }

子选择器

子元素选择器（子选择器）只能选择作为元素作为元素的最近一级子元素。简单理解就是选 亲儿子。元素之间用 大于号 > 隔开

注意： 元素 2 必须是亲儿子。最终选择的是元素 2

1

元素1 > 元素2 { 样式声明; }

并集选择器

选择多组标签，同时为他们定义相同的样式。通过 英文逗号 , 连接而成

1

元素1, 元素2 { 样式声明; }

伪类选择器

用于 向某些选择器添加特殊的效果，用冒号 : 表示。

1）链接伪类选择器

要按照 LVHA 的顺序声明，hover 常用

1
2
3
4

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

2）focus 伪类选择器

:focus 伪类选择器用于获取焦点的表单元素。一般和 input 搭配使用

1
2
3

input:focus {
  background-color: yellow;
}

…

复合选择器总结

元素显示模式

HTML 元素分为 块元素 和 行内元素。

块元素

常见的块元素有 h1-h6、p、div、ul、ol、li等。

块元素特点：

1. 独占一行。
2. 高度、宽度、外边距以及内边距都可以控制。
3. 宽度默认是容器（父级宽度）的 100%。
4. 是一个容器及盒子，里面可以方行内或块级元素。

注意：

• 文字类的标签内不能放块级元素。
• 文字类元素有 p，h1-h6，尤其不能放 div 元素。

行内元素

常见行内元素：a、strong、b、em、i、del、s、ins、u、span，典型行内元素是 span，行内元素也叫内联元素。

行内元素特点

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

注意

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

行内块元素

在行内元素中有几个特殊标签——img, input、td，它们 同时具有块元素和行内元素的特点。

行内块元素的特点

1. 和相邻元素（行内块）在一行上，之间存在空白缝隙，一行可以显示多个。
2. 默认宽度是本身内容宽度。
3. 高度、行高、外边距、内边距都可以控制（块级元素特点）。

元素模式转换

行内元素和块级元素 可相互转换。场景：比如想要增加链接 a 的触发范围。

行内->块级

1
2
3

a {
  display: block;
}

块级->行内

1
2
3

div {
  display: inline;
}

行内/块级-> 行内块元素

1
2
3

span {
  display: inline-block;
}

单行文字垂直居中

line–height = height

当行高小于盒子高度，则文字偏上；当行高大于盒子高度，文字偏下。

CSS 的背景

背景颜色

background-color 定义了元素的背景颜色。

1

background-color: 颜色值;

背景图片

background-image 属性描述了元素的背景图像

1

background-image: none|url(图片url);

背景平铺

background-repeat在 HTML 页面上对背景图进行平铺

既可以添加背景图片，也可以添加背景颜色，图片会覆盖颜色。

1

background-repeat: repeat(默认) | no-repeat | repeat-x | repeat-y;

背景图片位置

background-position 可以改变图片在背景中的位置。

1

background-position: x y;

参数 x 和 y 指 x 左边和 y 坐标，x 和 y 可以使用方位名词或者精确定位。

参数是方位名词

• 若两个值都是方位名词，则两个值前后顺序无关，比如left top和top left 效果一致。
• 若只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐。

参数是精确单位

• 第一个必定是 x 坐标。第二个是 y 坐标
• 若只指定一个数值，则另一个必定是 y 轴居中

参数是混合单位

• 若是混合单位，则 第一个值是 x 坐标，第二个值是 y 坐标。

背景图像固定（背景附着）

background-attachment 属性设置 背景图像是否随着页面其余部分滚动。

1
2
3
4
5

background-attachment: scroll | fixed;
/* 
scroll：背景图像随着对象内容滚动，默认
fixed：背景图像固定
*/

背景属性复合写法

简化代码，将属性写在同一个属性 background 下。 一般按照约定顺序编写。

1
2
3
4

background: transparent url(image.jpg) repeat-y fixed top;
/* 
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
*/

背景颜色半透明

CSS3 提供 background: rgba(r,g,b,a) 属性设置图片透明度，a为透明度。

1

background: rgba(0, 0, 0, 0.3);

CSS 的三大特性

CSS 有三个非常重要的特性：层叠性、继承性、优先级。

层叠性

相同选择器设置相同的样式，此时一个样式就会覆盖另一个冲突的样式。层叠性主要解决样式冲突的问题（样式重复）。

样式冲突遵循就近原则，以下代码会采用 color: blue

1
2
3
4
5
6

div {
	color: red;
}
div {
    color: blue;
}

继承性

CSS 中子标签会继承父标签的 某些样式，如文本颜色和字号。

子元素可以继承父元素的样式（text-, font-, line-这些元素开头的可以继承，以及 color 属性）

行高的继承性

这个1.5 就是子元素的行高，行高=子元素的文字大小*1.5

1
2
3
4
5
6
7
8
9

body {
  font: 12px/1.5 Microsoft Yahei;
}
div {
    font: 10px;
}
/* 
10px*1.5 --》div的行高为15p
*/

优先级

当一个元素指定多个选择器时，就会有有优先级的产生。

• 选择器相同，则执行层叠性
• 选择器不同，则根据选择器权重执行