css样式表/层叠样式表（2）
（1）css复合选择器后代选择器子元素选择器交集选择器（不常用）并集选择器链接伪类选择器（2）标签的显示模式块级元素block-level行内元素inline-level行内块元素inline-block标签显示模式转换（3）单行文本垂直居中（4）css背景（5）css三大特性权重计算公式权重叠加（1）css复合选择器
后代选择器
概念
后代选择器又称为包含选择器
作用
用来选择元素或元素组的子孙后代
其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔
语法
.class h3 {color:red;font-size:16px;}
子元素选择器
作用
子元素选择器只能选择作为某元素子元素(亲儿子)的元素
其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个>进行连接
语法
.class>h3 {color:red;font-size:14px;}
交集选择器（不常用）
条件
交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点
交际选择器 是并且的意思。即…又…的意思
p.one是类名为 one的 段落标签
并集选择器
比如 .one, p , #test {color: #F00;} 表示 .one 和 p 和 #test 这三个选择器都会执行颜色为红色。 通常用于集体声明
链接伪类选择器
类选择器是一个点
.demo {}
伪类选择器用2个点（冒号）
:link {}
作用
用于向某些选择器添加特殊的效果
未访问的连接a:link已访问的连接a:visited鼠标移动到链接上a:hover选定的链接a:active
顺序【lvha】不要颠倒！！！
a链接具有默认样式，需要给链接单独指定样式
（2）标签的显示模式
标签的分类
html标签一般分为块标签和行内标签（块元素和行内元素）
块级元素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>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。有的地方也成内联元素
行内元素的特点
（1）相邻行内元素在一行上，一行可以显示多个
（2）高、宽直接设置是无效的
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素
注意：
链接里面不能再放链接特殊情况a里面可以放块级元素，但是给a转换一下块级模式最安全
行内块元素inline-block
在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素
行内块元素的特点
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。一行可以显示多个
（2）默认宽度就是它本身内容的宽度
（3）高度，行高、外边距以及内边距都可以控制
标签显示模式转换
块-->行内
display: inline;
行内-->块
display: block;
块、行内元素-->行内块
display: inline-block;
<div>块级元素</div><div>块级元素</div><span>行内元素</span><span>行内元素</span><a href="#">百度</a><a href="#">新浪</a>span {/* 行内-->块 */display: block;width: 100px;height: 100px;background-color: blueviolet;}div {/* 块-->行内 */display: inline;width: 200px;height: 200px;background-color: orange;}a {/* 行内，块-->行内块 */display: inline-block;width: 50px;height: 50px;background-color: red;}
（3）单行文本垂直居中
文字的行高等于盒子的高度
行高 = 上距离 + 内容高度 + 下距离
行高和高度的三种关系
行高 = 高度 文字会 垂直居中如果行高 > 高度 文字会 偏下如果行高 < 高度 文字会 偏上
<a href="#">体育</a><a href="#">娱乐</a><a href="#">汽车</a>a {/* 行内，块-->行内块 */display: inline-block;width: 100px;height: 30px;text-align: center;background-color: pink;text-decoration: none;color: #fff;font-weight: 700;/* 行高==高度让单行文字垂直居中 */line-height: 30px;}a:hover {background-color: red;color: yellow;}
（4）css背景
背景颜色
background-color: 颜色值; 默认transparent 透明的
背景图片
background-image: none | url(地址);
地址不要加引号
背景平铺
background-repeat: no-repeat | repeat | repeat-x | repeat-y;
背景位置
background-position : length || lengthbackground-position : position || position
注意：
（1）必须先指定background-image属性
（2）position后面是x，y坐标；可以使用方位名词 或 精确单位
（3）若指定两个值都是方位名词，则前后顺序无关，效果一致
（4）若只指定一个方位名词，另一个值默认居中对齐
（5）若position后面是精确坐标，第一个为x，第二个为y
（6）若指定一个精确坐标，则数值为x坐标，另一个默认垂直居中
（7）若指定两个值为精确单位和方位名词混合使用，则第一个值为x坐标，第二个值为y坐标
背景附着
背景是滚动/固定
background-attachment: fixed | scroll;
背景简写
无强制标准
background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
background: #fff url(image.jpg) repeat-y scroll center top;
背景透明
background: rgba(0, 0, 0, 0.3);
（1）最后一个参数alpha 透明度 取值范围 0~1
（2）可以省略0.3的0
（3）盒子里面的内容不受影响
（5）css三大特性
（1）层叠性
概念
多种CSS样式的叠加
是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉
原则
样式冲突，遵循的原则是就近原则样式不冲突，不会层叠
（2）继承性
概念
子标签会继承父标签的某些样式，如文本颜色和字号
想要设置一个可继承的属性，只需将它应用于父元素
子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）
（3）优先级
概念
定义CSS样式时，经常出现两个或更多规则应用在同一元素上
（1）选择器相同，则执行层叠性
（2）选择器不同，就会出现优先级的问题
权重计算公式
值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越
权重叠加
注意
数位之间没有进制
比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况
继承的权重为0
这个不难，但是忽略很容易绕晕。其实，我们修改样式，一定要看该标签有没有被选中
（1）如果选中了，那么以上面的公式来计权重。谁大听谁的
（2）如果没有选中，那么权重是0，因为继承的权重为0
<div class="demo"><p>胡梓卓</p></div>div {color: red;}p {color: green;}.demo {color: blue;}
/* 21 */.c1 .c2 div{color: blue;}/* 101 *//* 101 */#box1 div {color:yellow;}/* 就近原则 */div #box3 {color:green;}</style></head><body><div id="box1" class="c1"><div id="box2" class="c2"><div id="box3" class="c3">文字</div></div></div></body>
