今日学习内容：
CSS的复合选择器
是建立在基础选择器之上，对基础选择器进行组合形成
优点：
可以更加准确、高效的选择目标元素
常用的复合选择器：
1.后代选择器
可以选择父元素里面的子元素，外层标签写前面，内层标签选后面，中间用空格隔开。（.box1 p {}/.box2 p {}）
语法：
1）元素1 元素2 （样式声明）
2）元素1是父级 元素2是子集
3）元素2可以是孙子也可以是儿子，是后代就行
4）元素1、2可以是任意的基础选择器
2.子选择器
只能作为某元素最近的一级子元素，理解为亲儿子选择器
语法：
1）元素1>元素2（样式声明）
2）元素1和元素2之间要>隔开
3）元素2必须是元素1的亲儿子，孙子重孙都不行
3.并集选择器
并集选择器可以选择多组标签，同时为他们指定相同的样式，通常用于集体声明
注意点：
并集选择器中每一组选择器之间要用，隔开
每一组选择器可以是任意类型选择器，基础和复合都行
4.伪类选择器
链接伪类选择器
：link 选择所有未被访问过的链接
：visited 选择所有已经被访问过的链接
：hover 选择所有链接鼠标悬停时候，来设置状态
：active 选择所有链接当鼠标点击时的状态
注意：
都用时 按照lvha的顺序来进行设置
如果想要给其他选择器添加伪类，这个选择器必须要有伪类的状态，否则不可以使用
焦点伪类选择器
：focus来实现焦点元素的样式设置
语法：
1）input：focus（样式声明）；
一般焦点伪类选择器都是联合input标签使用，因为input可聚焦
css的元素显示模式
什么是？
元素在网页中的显示状态，就是它本身的样式，比如：h1标签独占一行，span标签一行多个
html元素显示模式的分类
块元素
特点：
1）自己独占一行
2）宽度默认的是父级宽度的百分之百
3）本身也可以是容器或者盒子，里面可以放其他的行内或者块级元素
4）宽高都可以自己设置，内外边距也可以
常见块元素：h1~h6、div、p、ul ol li、其中div是最典型的块元素
注意点：
文字类的元素内不能使用块级元素 比如：p标签不要放div标签
行内元素
特点：
1）相邻的行内元素会在一行上进行显示
2）宽高设置都是无效的
3）默认宽高是他内容本身的宽高
4）行内元素只能容纳文本或者其他行内元素 比如span里面不放div
5）相邻行内元素之间会有一点空隙
常见的行内元素
<a>、<strong>、<span>等等
注意点：
链接里不可以再放链接
如果a标签内要放一个块级元素，要将a标签的显示模式转化为块级更安全
行内块元素
特点：
1）相邻的行内块元素在一行上显示，并且有空白间隙
2）默认宽度是他本身内容的宽度
3）高度和宽度可以进行设置
常见的行内块元素
input、img、td等
元素显示模式的转换
转化为块级元素
display：block
转化为行内元素
display：inline
转化为行内块元素
display：inline-block
css的背景属性
背景颜色：
background-color：
属性值：同color
默认值是：transparent
背景图片：
background-image
属性值：
url（图片路径）
背景平铺
background-repeat:
属性值：
repeat（默认值，代表背景图片在横向纵向上都平铺）
no-repeat（代表图片不平铺）
repeat-x（代表背景图片在横向上平铺）
repeat-y（代表背景图片在纵向上平铺）
背景图片的定位：
background-position
属性值
精确的像素值单位
第一个像素值为x轴坐标，第二个为y轴坐标
只写一个，另一个默认居中（第一个必须x轴，若想x轴居中 可 center px）
精确单位和混合名词可以混合使用（前x后y）
方位名词（top bottom left right center）
注意点：
方位名词没有先后顺序，都可以产生正常的显示效果
只写一个方位名词，另一个方位默认居中
背景图片的滚动
background-attachment
属性值：
scroll：默认值，随着图片进行滚动
fixed：图片不跟随屏幕进行滚动
背景的复合写法
background
属性值：bg-color bg-image bg-repeat bg-attachment bg-position
实际开发中我们一般会用复合写法
背景半透明
语法：
background：rgba（0，0，0，0.3）
a是alpha的缩写，代表透明度，取值范围1~0之间
0.3可以写为.3
背景半透明 指的是盒子背景的半透明 对盒子内容不受影响
是css3新增属性，不关注兼容性，可直接写
CSS的三大特性
1.层叠性
相同的选择器设置相同的样式时，新盖旧
原则：
1）样式冲突时，遵循就近原则，哪个离结构近，就用哪一个
2)样式不冲突，不层叠
2.继承性
在css中，子标签会继承父标签懂得某些样式，比如文本颜色和字号等等，简单理解为子承父业
可以被继承的属性
text- 、font- 、line-、以及color属性
儿子没就用爸的 有就用自己的
3.优先级（权重）
如果选择器相同，执行层叠性
如果选择器不同执行优先级（根据权重执行）由上自下
：
将样式加上！important代表无穷大
行内样式 1，0，0，0
id选择器 0，1，0，0
类选择器、伪类选择器 0，0，1，0
元素（标签）选择器 0，0，0，1
继承或者* 0，0，0，0
权重注意点：
1）权重由四组数字构成，但是不会有进位，简单理解为类选择器永远大于元素选择器
2）如果使用复合选择器，那么就将复合选择器中的基础选择器的权重进行相加比较即可
3）继承的权重是0，父元素的样式权重再高对于子元素来说，继承下来样式的权重都是0
|
