1. CSS复合选择器

子元素选择器

作用：

子元素选择器只能选择作为某元素**子元素(亲儿子)**的元素。

其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接

语法：

.class>h3 {
	color:red;
	font-size:14px;
}

这里的子指的是亲儿子不包含孙子重孙子之类。

白话：

比如：.demo > h3 {
    color: red;
}   说明  h3 一定是demo 亲儿子。demo 元素包含着h3。

交集选择器

条件:

交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。

其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。

记忆技巧：

交集选择器是并且的意思。即...又...的意思

比如：p.one 选择的是：类名为 .one 的段落标签。

并集选择器（重点）

任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。

记忆技巧：并集选择器通常用于集体声明，逗号隔开的，所有选择器都会执行后面样式，逗号可以理解为和的意思。

比如  
.one, p , #test {
    color: #F00;
}  
表示   .one 和 p  和 #test 这三个选择器都会执行颜色为红色。 
通常用于集体声明。

链接伪类选择器

作用：

用于向某些选择器添加特殊的效果。比如给链接添加特殊效果，比如可以选择第1个，第n个元素。

因为伪类选择器很多，比如链接伪类，结构伪类等等。我们这里先给大家讲解链接伪类选择器。

a:link      /_ 未访问的链接 _/ 
a:visited   /_ 已访问的链接 _/ 
a:hover     /_ 鼠标移动到链接上 _/ 
a:active    /_ 选定的链接 _/

注意

因为叫链接伪类，所以都是利用交集选择器 a:link a:hover

因为a链接浏览器具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

实际工作开发中，我们很少写全四个状态，一般我们写法如下：

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

伪元素选择器

:before : 选择器在被选元素的内容前面插入内容
:after : 选择器在被选元素的内容后面插入内容

属性选择器

[attribute] 选择带有attribute属性的元素
[attribute=value] 选择所有使用attribute=value的元素
[attribute~=value] 选择attribute属性包含value的元素
[attribute|=value]：选择attribute属性以value开头的元素

在CSS3中新增的选择器有如下：

层次选择器（p~ul），选择前面有p元素的每个ul元素
伪类选择器

:first-of-type 父元素的首个元素
:last-of-type 父元素的最后一个元素
:only-of-type 父元素的特定类型的唯一子元素
:only-child 父元素中唯一子元素
:nth-child(n) 选择父元素中第N个子元素
:nth-last-of-type(n) 选择父元素中第N个子元素，从后往前
:last-child 父元素的最后一个元素
:root 设置HTML文档
:empty 指定空的元素
:enabled 选择被禁用元素
:disabled 选择被禁用元素
:checked 选择选中的元素
:not(selector) 选择非 <selector> 元素的所有元素

属性选择器

[attribute*=value]：选择attribute属性值包含value的所有元素
[attribute^=value]：选择attribute属性开头为value的所有元素
[attribute$=value]：选择attribute属性结尾为value的所有元素

2. 标签显示模式（display）

块级元素(block-level)

例：

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

块级元素的特点

（1）自己独占一行

（2）高度，宽度、外边距以及内边距都可以控制。

（3）宽度默认是容器（父级宽度）的100%

（4）是一个容器及盒子，里面可以放行内或者块级元素。

注意：

只有文字才能组成段落因此 p 里面不能放块级元素，特别是 p 不能放div

同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。

行内元素(inline-level)

例：

常见的行内元素有
<a>、<strong>、<b>、<em>、<i>、<s>、<ins>、<u>、<span>等，
其中<span>标签最典型的行内元素。有的地方也成内联元素

行内元素的特点：

（1）相邻行内元素在一行上，一行可以显示多个。

（2）高、宽直接设置是无效的。

（3）默认宽度就是它本身内容的宽度。

（4）行内元素只能容纳文本或则其他行内元素。

注意：

链接里面不能再放链接。

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

行内块元素（inline-block）

例：

在行内元素中有几个特殊的标签
<img />、<input />、<td>，
可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

行内块元素的特点：

（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。一行可以显示多个

（2）默认宽度就是它本身内容的宽度。

（3）高度，行高、外边距以及内边距都可以控制。

标签显示模式转换 display

块转行内：display:inline;

行内转块：display:block;

块、行内元素转换为行内块： display: inline-block;

此阶段，我们只需关心这三个，其他的是我们后面的工作。

3. CSS 背景(background)

背景颜色(color)

语法：

background-color: 颜色值;   
默认的值是 transparent  透明的

背景图片(image)

语法：

background-image : none | url (url)

none 无背景图（默认的）

url 使用绝对或相对地址指定背景图像

background-image : url(images/demo.png);

小技巧：我们提倡背景图片后面的地址，url不要加引号。

背景平铺（repeat）

语法：

background-repeat : repeat | no-repeat | repeat-x | repeat-y

repeat 背景图像在纵向和横向上平铺（默认的）

no-repeat 背景图像不平铺

repeat-x 背景图像在横向上平铺

repeat-y 背景图像在纵向平铺

背景位置(position) 重点

语法：

background-position : length || length

background-position : position || position

length 百分数

position top

注意：

必须先指定background-image属性

position 后面是x坐标和y坐标。可以使用方位名词或者精确单位。

如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left top和top left效果一致

如果只指定了一个方位名词，另一个值默认居中对齐。

如果position 后面是精确坐标，那么第一个，肯定是 x 第二的一定是y

如果只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中

如果指定的两个值是精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标

实际工作用的最多的，就是背景图片居中对齐了。

背景附着

背景附着就是解释背景是滚动的还是固定的

语法：

background-attachment : scroll | fixed

scroll 背景图像是随对象内容滚动

fixed 背景图像固定

背景简写

background：属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写：

background: 背景颜色背景图片地址背景平铺背景滚动背景位置;

语法：

background: transparent url(image.jpg) repeat-y  scroll center top ;

背景透明(CSS3)

语法：

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

最后一个参数是alpha 透明度取值范围 0~1之间

我们习惯把0.3 的 0 省略掉这样写 background: rgba(0, 0, 0, .3);

注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响

因为是CSS3 ，所以低于 ie9 的版本是不支持的。

4. CSS 三大特性

CSS层叠性

概念：

所谓层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉

原则：

样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。

样式不冲突，不会层叠

CSS继承性

概念：

子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。

注意：

恰当地使用继承可以简化代码，降低CSS样式的复杂性。比如有很多子级孩子都需要某个样式，可以给父级指定一个，这些孩子继承过来就好了。

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

CSS优先级（重点）

概念：

定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时，选择器相同，则执行层叠性。选择器不同，就会出现优先级的问题。

1). 权重计算公式

关于CSS权重，我们需要一套计算公式来去计算

标签选择器计算权重公式

继承或者 * ，后代选择器 0,0,0,0

标签选择器，伪元素选择器(li::after) 0,0,0,1

每个类，伪类，属性选择器(a[ref="eee"]) 0,0,1,0

每个ID 0,1,0,0

每个行内样式style="" 1,0,0,0

每个!important 重要的 ∞ 无穷大

2). 权重叠加

我们经常用交集选择器，后代选择器等，是有多个基础选择器组合而成，那么此时，就会出现权重叠加。

就是一个简单的加法计算

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

注意：

数位之间没有进制比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0，所以不会存在10个div能赶上一个类选择器的情况。

5. 盒子模型

一、是什么

当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）

一个盒子由四个部分组成：content、padding、border、margin

image-20220726130633850转存失败，建议直接上传图片文件

content，即实际内容，显示文本和图像

boreder，即边框，围绕元素内容的内边距的一条或多条线，由粗细、样式、颜色三部分组成

padding，即内边距，清除内容周围的区域，内边距是透明的，取值不能为负，受盒子的background属性影响

margin，即外边距，在元素外创建额外的空白，空白通常指不能放其他元素的区域

上述是一个从二维的角度观察盒子，下面再看看看三维图：

image-20220726130720860转存失败，建议直接上传图片文件

下面来段代码：

<style>
  .box {
    width: 200px;
    height: 100px;
    padding: 20px;
  }
</style>
<div class="box">
  盒子模型
</div>

当我们在浏览器查看元素时，却发现元素的大小变成了240px

这是因为，在CSS中，盒子模型可以分成：

W3C 标准盒子模型
IE 怪异盒子模型

默认情况下，盒子模型为W3C 标准盒子模型

二、标准盒子模型

标准盒子模型，是浏览器默认的盒子模型

下面看看标准盒子模型的模型图：

image-20220726130818823转存失败，建议直接上传图片文件

从上图可以看到：

盒子总宽度 = width + padding + border + margin;
盒子总高度 = height + padding + border + margin

也就是，width/height 只是内容高度，不包含 padding 和 border值

所以上面问题中，设置width为200px，但由于存在padding，但实际上盒子的宽度有240px

三、IE 怪异盒子模型

同样看看IE 怪异盒子模型的模型图：

image-20220726130853484转存失败，建议直接上传图片文件