备注：部分选择器见02 教程
## 1、子元素选择器
子元素选择器只能选择作为某元素子元素的元素，其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接， 注意符号左右 两侧各保留一个空格
```
.box > span{
color: red;
font-size: 100px;
}
<div class="box">
<p>
<span>前端开发教学</span>
</p>
<span>前端开发教学第三天</span>
<!--
p 和 span 是同级标签
前端开发教学第三天 生效了 子代选择器，选择的元素的亲儿子
-->
</div>
```
## 2、并集选择器
并集选择器，是哥哥选择器通过，逗号 连接而成，任何形式的选择器包括标签选择器，class类选择器 id 选择器，都可以作为并集选择器的一部分
.box,p,h2{
color: red;
font-size:20px;
}
<div class="box">并集选择器2</div>
<p>并集选择器2</p>
<h2>并集选择器3</h2>
并集选择器 和的意思，就是说只要逗号隔开，所有选择器都会执行后面样式
## 3、链接伪类选择器
链接伪类选择器 (内置类)
：link 未访问的链接
：visited 已访问的链接
: hover 鼠标移动到链接上
：active 选定的链接 超链接激活的状态
```
他们的书写顺序 一定要是 lvha 不要颠倒顺序
实际开发 hover 最多
<style type="text/css">
a:link{
color: pink;
text-decoration: none;
}
a:visited{
color: orange;
}
a:hover{
color: red;
text-decoration: underline;
}
a:active{
color: blue;
}
</style>
<a href="#">人生如梦</a>
```
## 标签显示模式 （display ）
1、块元素 block-level
## 块元素会独占一行或者多行，可以对其设置宽高对其等属性，常用于网页结构的搭建
常见的块元素有 <h1> -<h6> <p> <div> <ul> <li>等
块元素特点：
1、总数从新行开始
2、高度，行高，外边距，以及内边距都可以控制
3、宽度默认是容器的100%；
4、可以容纳内敛元素和其他块元素
5、是一个容器的盒子，里面可以放行内块或者块级元素
6、独占一行很重要 **
## 7、没有设置宽度，会默认父元素的宽度
8、可以设置宽高，内容也会撑开高度
2、行内块 inline-level
1、内联元素，不沾油独立的区域，仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度，高度，对齐等属性，常用于控制页面中文本的样式
<a> <strong> <span>
行内元素特点：
1、在一行上显示
2、不能直接设置宽高，宽高是内容撑开的
3、不能设置对齐，常用于控制文本
3、行内块元素 inline-block
1、行内块 img input td 可以对他们设置宽高，和对齐属性，
行内快的特点：
1、和相邻的行内块元素在一行上，但是之间会有空白缝隙
2、默认宽度就是它本身内容的宽度
3、高度，行高 ，外边距以及内边距都可以控制
4、可以在一行上显示
5、可以设置宽高
## 三种模式区别：
元素模式
元素排列 设置样式 默认宽度 包含
1、块元素 一行只能放一个块元素 可以设置宽度高度 容器的100% 容器级可以包含任何标签
2、行内元素 一行可以放多个行内元素 不可以直接设置宽度高度 它本身内容的宽度 容纳文本或则其他行内元素
3、行内块元素 一行放多个行内块 元素 可以设置宽度和高度 它本身内容的宽度
## 标签显示模式转换 display 重点
三种类型可以相互转换
块元素转行内 ： display： inline
行内转块 ： display ： block；
块、行内元素转为行内块： display：inline-block；
## 让我们现在来一个小练习吧：
1. 写 三个 div 给定 100 * 100 的红色盒子 -- 宽度 高度 背景色
2. 三个 span 也要求 150 * 150 绿色盒子
3. 三个 a 链接 80 * 20 蓝色 盒子 要求 必须一行显示 这三个盒子
4. 鼠标经过3个a链接的时候， 背景颜色变为 橙色
如果自己写不出来可以参照我的写法，代码就得写加上练习与检测
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 100px;
height:100px;
background-color: red;
}
span{
width: 150px;
height: 150px;
background-color: green;
/*display: block;*/
display:inline-block;
}
a{
width: 80px;
height: 20px;
display: inline-block;
background-color: blue;
}
a:hover{
background-color: orange;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
1111111111111
<br>
<span></span>
<span></span>
<span></span>
<a href=""></a>
<a href=""></a>
<a href=""></a>
</body>
</html>
```
## ** 行高 那些事 重点
浏览器默认文字是 16
行高的默认值 约等于 1.1-1.3 line-height:normal
### 不想要行高 line-height:1; 谨记 要是不等于1 哪怕 normal 也不好使
行高的标准定义是基线与基线之间的距离 可以在ps 中看见 看我下图
行高分为 四块 顶线 中线 基线 底线
行高我们利用最多的一个地方是，可以让一行文本在盒子中垂直居中对齐，
#### 一行文字行高与容器高度一致的时候，这行文字垂直居中
上下距离总是相等的，因此文字看上去是垂直居中的
如果行高等于 height 高度 文字会垂直居中
如果行高大于高度 文字会偏下
如果行高小于高度 文字会偏上
## C33层叠性
当多个 选择器 作用于一个标签上会发生样式冲突，谁距离标签更近 会使用谁
层叠性是浏览器处理冲突的一个能力，如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一属性就会将另外一个属性层叠掉，样式冲突，遵循的原则是就近原则，那个样式离着结果近，就执行那个样式，样式不冲突，不会出现层叠
## 继承性
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.father{
color: red;
font-size: 100px;
font-style: italic;
font-weight: 800;
font-family: 'simsun';
text-indent: 2em;
text-decoration: underline;
text-align:right;
line-height: 150px;
}
</style>
</head>
<body>
<div class="father">
<p>继承性</p>
</div>
</body>
</html>
```
a 标签 不会继承父元素的文字颜色
H1 标题标签 不会继承父元素的大小
继承都是来自于浏览器 #### user agent stylesheet
## 优先级权重计算
权重计算器公式 计算权重公式
继承或者 * 通配符 * 0,0,0,0
每个元素标签选择器 0,0,0,1
每个类，伪类 0,0,1,0
每个ID 0,1,0,1
每个行内样式style=‘’ 1,0,0,0
每个 ！important 重要 无穷大
当多个养生作用于同一个标签的时候，发生了样式冲突权重高的样式优先执行，当权重一样的时候，就近原则~! 我想静静 手记 转载需备注！
默认样式 < 标签选择器< 类选择器<id 选择器 <行内样式 < !important 谨记 要带上叹号
继承的权重为0
权重是可以叠加的
div ul li 0,0,0,3
.nav ul li 00,1,2
a:hover 0,0,1,1
.nav a 0,0,1,1
#nav p 0,1,0,1
## Css 背景 background
background-color ：transparent; 背景颜色透明
background-image ：url() 背景图片地址
background-position： top bottom center left right 背景位置. 可以写 像素 10px 100px 10是距离左面 100 是上面
background-repeat：no-repeat 背景是否平铺
background-attachement:scroll 背景固定还是滚动 fixed 固定 一共两个值
#### 背景定位
background-position： 20px;
写2个方位值，没有顺序要求
写一个方位值或者数值，另外一个值默认center 写 2个数值，第一个数值 是距离左边的距离，第二个数值是距离顶边的距离
## 背景属性连写 重要
background:#ccc url() no-repeat 50px 100px scroll;
网友评论