一、今日所学内容
(1)CSS复合选择器
什么是复合选择器？
复合选择器是对基本选择器进行组合而成的
复合选择器包括一下几个
后代选择器：也叫做包含选择器，就是可以选择父元素里面的所有符合条件的子元素
语法规范：
元素1 和 元素2之间要用空格隔开
元素1是父级，元素2是子级，最终选择的是子级
元素2可以是儿子，也可是孙子，只要是元素1的后代都可以
元素1和元素2可以使任意的基础选择器
子选择器：子选择器也是亲儿子选择器，会选择父级最近的子元素
语法规范
元素1和元素2之间要用大于号隔开
元素1是父级，元素2是子级，最终选的是子级元素
元素2必须是亲儿子，孙子，重孙元素都不可以
并集选择器：并集选择器可以选择多组标签，同时问他们定义相同的样式，通常用于集体声明，每组选择器之间用逗号“,”隔开
语法规范：
伪类选择器
链接伪类选择器
主要是给链接选择器上附加效果
伪类名称 示例 说明
：link a:link 选择所有未被访问过的链接
：visited a:visited 点击之后
：hover a:hover 鼠标悬浮
：active a:active 点击时样式
注意：按照以上顺序设置伪类选择器
focus伪类选择器（焦点伪类选择器）
焦点伪类选择器时获取光标所在的位置进行样式变化，这个伪类选择器主要就是针对表单元素来说的
伪类选择器总结：
伪类和CSS的类一样，可以附加在其他的选择器上
向其他选择器附加伪类选择器时，必须选择器要支持伪类选择器所声明的状体，否则没有效果
(2)CSS元素显示模式
元素显示模式的分类
块级元素
常见的块级元素有
h1~h6标签、p标签、div标签、ul标签、ol标签、li标签等等
块级元素的特点
自己独占一行
高度和宽度都可以控制（内外边距也可以控制）
宽度默认时父级的100%
块级元素里面可以放其他的块级或者行内元素
注意：
文字类的元素不能放块级元素
例如：p标签和h1~h6标签内部不能放div标签内
行内元素
常见的行内元素
a标签、strong标签、b标签、em标签、i标签、del标签、span标签等等，span标签是典型的行内元素
行内元素的特点
行内元素在一行上可以显示多个
无法设置宽高
默认的宽度和高度是它本身的内容的宽高
行内元素只能容纳文本或者其他行内元素
注意：
链接标签里面不能再放链接
特殊情况在a标签里面要放其他
行内块元素
常见的行内块元素
img标签、input标签、td标签等等
行内块元素的特点
和相邻的行内块元素在一行上，但是他们之间会有空白空隙，一行可以显示多个（行内元素特点）
高度和宽度都是可以进行控制的（块级元素特点）
元素显示模式的转化
转化为块级元素：display:block;
转化为行内元素：display:inline;
转化为行内块元素：diaplay:inline-block;
文字的垂直居中
CSS没有提供文字垂直居中的代码，可以用一下方式解决
让文字的行高等于盒子的高度
(3)CSS背景属性
背景颜色
背景颜色使用background-color来进行设置，它的默认值是transparent（透明）
背景图片
background-image：url(图片地址)；默认值是none
背景平铺
background-repeat
属性值：
/* 背景图片不平铺 */
background-repeat: no-repeat;
/* 背景图片横向平铺 */
background-repeat: repeat-x;
/* 背景图片纵向平铺 */
background-repeat: repeat-y;
/* 背景图片横向纵向平铺(默认值) */
background-repeat: repeat;
背景图片定位
1.可以使用方位名词进行设置
2.可以使用具体的像素单位设置
3.可以混合方位名词和像素值进行设置
背景图片定位总结:
1.参数是方位名词
如果指定的两个值都是方位名词,则两个值得先后循序没有关系
如果指定了一个方位名词,另一个值省略.则省略得值为center(居中对齐)
2.参数是精确的像素单位
如果参数是精确的像素单位,第一个值肯定是x坐标,第二个值是y
如果只指定了一个数值,那么该数值就一定是x坐标,y坐标默认居中
背景图片附着(滚动)
background-attachment
属性值:
/* 默认值,背景图片随着屏幕滚动 */
background-attachment: scroll;
/* 背景图片不跟随屏幕滚动 */
background-attachment: fixed;
背景复合写法
默认的复合写法的顺序为:
background: 背景颜色 背景图片 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
(4)CSS的三大特性:
层叠性:相同的选择器给设置相同的样式时,新的样式会覆盖掉旧的样式(层叠)
层叠的原则:
样式冲突:遵循的是就近原则
样式不冲突,不会层叠
继承性:子标签会继承父标签的某些样式,例如颜色字号等等,子承父业.
优先级(权重):
当选择器相同的时候遵循层叠性原则
当选择去不同的时候遵循
选择器 选择器的权重
继承和* 0,0,0,0
元素选择器(标签选择器) 0,0,0,1
类选择器,伪类选择器 0,0,1,0
ID选择器 0,1,0,0
行内选择器 1,0,0,0
!important 无穷大
优先级的注意点
1.权重是由四组数字组成,但是永远不会有进位
2.可以理解为类选择器永远大于元素选择器,一次类推
3.等级判断从左向右进行判断,如果某一位相同,那就判断下一位
4.继承的权重是0,不管父元素的权重有多高,子元素继承的到的权重都是0
权重叠加
div ul li 权重是 0,0,0,3
.nav ul li 权重是 0,0,1,2
a:hover 权重是 0,0,1,1
|
