CSS的复合选择器
什么是复合选择器
在CSS中，可以根据浏览器的类型把选择器分为基础选择器和复合选择器，复合选择器就是在基础选择器之上，对其进行组合形成的。
复合选择器可以更加准确高效的定位元素
复合选择器是由两个或者两个以上的基础选择器以不同的方式组合而成的。
后代选择器
概念
后代选择器又叫做包含选择器，是可以选择父元素里面的所有符合条件的子元素
语法
元素1 元素2 {CSS 样式};
元素1代表父元素、元素2代表子元素
元素1 和 元素2 之间要用空格隔开
元素2可以是儿子也可以是孙子
元素1和元素2可以是任意类型的选择器
子选择器
概念
子选择器只能选择某个父元素最近的一级子元素，简单理解就是只能选择亲儿子，不能选择孙子或者重孙等等。
语法
元素1 > 元素2 {css 样式代码}
表示选择元素1 里面最近的一级 元素2
并集选择器
概念
并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明
并集选择器是各组选择器通过英文的逗号连接而成，任何形式的选择器都可以作为并集选择器的一部分
伪类选择器
概念
伪类选择器是附加在其他选择器之上的一种选择器，可以来添加特殊的效果，比如给链接标签添加鼠标悬浮效果等。
语法
用:来进行表示 比如:hover :first-child。
链接伪类选择器
因为伪类选择器比较多，链接伪类的使用是最频繁的。
:hover
a:hover 选择鼠标指针悬浮到链接上
:link
a:link 选择所有未被访问过的链接
:active
a:active 选择活动链接，当鼠标按下链接时
:visited
a:visited 选择所有已访问过的链接
注意点
向选择器添加伪类选择器是，首先应该保证选择器具有对应的伪类状态，否则不能使用。
焦点伪类选择器
:focus
焦点伪类选择器用于选取获得焦点的元素，因为一般只有表单元素才会获取焦点，所以对于input类的表单元素使用的较多，焦点就是光标。
伪类选择器的总结
为了选择器和css类选择器一样，可以附加在其他的选择器上
向选择器添加伪类选择器的时候，必须保证这个选择器支持这种伪类状态
CSS的元素显示模式
什么是CSS的元素显示模式
简单来说就是元素的显示方式，以什么样的形式来展示，比如，h1标签自己占一行，span标签一行会有多个
块元素
常见的块元素
h1~h6、<p></p>、<div></div>、<ul></ul>、<ol></ol>、<li></li>等等，<div></div>是最典型的块元素
块元素的特点
1、自己独占一行
2、高度和宽度可以设置
3、宽度默认是和父元素宽度保持一致的
4、块元素里面可以放行内元素也可以放块元素
注意点：
文字类的元素内不能使用块元素。
比如p标签中只能放文字，不要放其他的块元素，特别是<div>，因为会造成语义混乱的情况。
行内元素
常见的行内元素
<span></span>、<strong></strong>、<a></a>、<i></i>等等。
特点
相邻的行内元素在一行上进行展示，一行可以显示多个
宽高设置无效
默认的宽度和高度是它里面内容的宽高
行内元素只能容纳文本或者其他的行内元素
注意点：
链接里面不要再套链接。
如果a标签里面嵌套了块元素，那么就需要先将a标签转化为块元素才可以。
行内块元素
常见的行内块元素
<img>、<input>
特点
相邻的元素在一行上进行显示，但是它们之间会有空白空隙（行内元素的特点）
高度、宽度都是可以设置的（块元素）
默认的宽度是它本身内容大小（行内元素的特点）
元素的显示模式转换
转化为块元素：display:block;
转化为行内元素：display:inline;
转化为行内块元素：display:inline-block;
CSS的背景属性
背景颜色
属性是background-color
属性值：预定义颜色、16进制颜色、rgb颜色、transparent(透明、默认值)。
背景图片
属性：background-image
属性值：none(默认值，代表没有背景图) 、 图片的url地址
背景平铺
background-repeat
属性
repeat 背景图像平铺，（横向纵向都平铺）
no-repeat 背景图像不平铺
repeat-x 横向平铺
repeat-y 纵向平铺
背景图片定位
background-position:x,y;
属性值
具体像素单位
方位名词:left、right、top、bottom、center
注意点：
1、参数是方位名词
如果指定的两个值都是方位名词，先后顺序不会影响最后结果
如果只指定了一个方位名词，另一个默认居中
2、参数是精确单位
第一个值一定是x坐标，第二个值是y坐标
如果只有一个值，那就是x坐标，y轴默认居中
3、参数是混合单位
如果方位名词和精确单位混合使用，第一个值是x轴坐标，第二个值是y坐标
背景图片滚动
background-attachment
属性值
scroll 默认值，图片跟随浏览器进行滚动
fixed 图片不跟随屏幕滚动
背景的复合写法
为了简化背景属性的代码，我们可以将以上属性都写在复合属性background中
一般情况下背景的复合属性顺序为：background: 背景颜色 背景图片 背景平铺 背景图像滚动 背景图片位置。
例
背景属性的顺序不是固定的，可以改变顺序，但是建议参照上面的顺序来书写
背景复合属性中的各个属性都可以省略。
背景半透明
CSS3为我们提供了背景半透明的效果
语法
background:rgba(0,0,0,0.3)；
最后一个参数是alpha透明度，取值范围在0~1之间
我们实际开发过程中会将0.3中0给省略掉
背景半透明并不会影响盒子中的内容
背景缩放
属性 background-size
属性值
具体像素值
cover
contain
CSS的三大特性
层叠性
如果选择器相同，设置了相同的样式，就会出现样式冲突的问题
层叠性原则
样式冲突，遵循的原则就是就近原则，哪个样式距离结构近，就用哪个
样式不冲突，不会层叠。
继承性
CSS中的继承：子元素会继承父元素的某些样式，比如文本属性，字体属性等等。
子元素可以继承的属性：font-、text-、line-、color等。
优先级（权重）
当同一个元素被指定了多个选择器，就会出现优先级的问题
选择器相同，执行层叠性。
选择器不同，就执行优先级
优先级的注意点
权重是由四组数字构成的，但是不会有进位（例如：元素选择器永远不会比类选择器的权重高）
如果遇到复合选择器，那么要将他们的权重进行相加后进行比较。
权重叠加
div ul li a ---> 0,0,0,4
.nav a:hover ---> 0,0,2,1
.header ul li a:hover ---> 0,0,2,3
#song .nav ul a:hover -->0,1,2,2
继承的权重是0，如果该元素没有被直接选中，不管父元素的权重是多高，子元素得到的样式权重都是0
|
