本帖最后由 晓9863 于 2022-11-14 19:13 编辑
今日学习：
复合选择器
后代选择器
可以选择父元素里面的子元素，外层标签写前面，内层标签写后面，中间空格隔开
元素1 元素2{样式声明}
元素1是父级 元素2是子级
元素2可以是儿子，也可以是孙子，只要是元素1的后代即可
元素1 元素2可以是任意的基础选择器
子选择器
子元素选择器只能选择作为某元素的最近一级子元素，简单理解就是亲儿子选择器
元素1 > 元素2{样式声明}
元素1和元素2之间用大于号隔开
元素2必须是元素1的亲儿子、孙子，重孙都不行
并集选择器
并集选择器可以选择多组标签，同时为他们来指定相同样式，通常用于集体声明
并集选择器中每组要用逗号隔开
每一组选择器可以是任意类型的选择器，基础选择器、复合选择器都可以
伪类选择器
链接伪类选择器
link选择所有未被访问过的链接
visited选择所有已经被访问过的链接
hover选择所有链接鼠标悬停时的状态
active选择所有链接当鼠标点击时的状态
如果四个伪类都要使用，按照lvha顺序来进行设置
想给其他选择器添加伪类，这个选择器要有伪类状态，否则不能使用，实际工作hove用的最多
焦点伪类选择器
input：focus{样式说明}
一般焦点伪类选择器都是和input标签联合使用的，因为input标签具有聚焦的状态
CSS元素显示模式
html元素显示模式的分类
块元素
自己独占一行
宽度默认父级宽度百分百
本身也可以是容器或者盒子，里面可以放其他的行内或者块级元素
高度和宽度都是可以设置的，同样内外边距也可以控制
常见块级元素h1-h6，div，p，ul、ol、li都是块级元素
文字类的元素不能使用块级元素
行内元素
相邻的行内元素会在一行上进行显示
宽高设置无效
常见行内元素a、span、strong等
默认的宽高是它本身内容的宽高
行内元素只能容纳文本和其他行内元素
链接里不可以再放链接
行内块元素
相邻的行内块在一行上显示，并且有空白缝隙（行内元素特点）
默认宽度是它本身内容的宽度（行内元素特点）
高度和宽度可以进行设置（块元素特点）
常见行内块元素有input、img、td
元素显示模式的转换
display：block转换为块级元素
display：inline转换为行内元素
display：inline-block转换为行内块元素
CSS背景属性
background-color背景颜色
默认值：transparent透明色
background-image背景图片
url（图片路径）
background-repeat背景平铺
repeat默认值，代表背景图片在横向和纵向上都平铺
no-repeat代表背景图片不平铺
repeat-x代表背景图片在横向上平铺
repeat-y代表背景图片在纵向上平铺
background-position背景图片定位
精确的像素值单位
第一个值x轴坐标，第二个y轴坐标
当我们只写了一个像素值，代表横轴进行相应的设置，纵轴是默认居中
我们无法直接跳过x轴来设置y轴的精确像素值
方位名词
top、bottom、center、left、right
没有先后顺序，都可以产生效果
如果只写一个方位名词那么另一个方位默认居中
方位名词和精确单位可以混用
background-attachment背景图片的滚动
scroll默认值，图片随屏幕滚动
fixed图片不随屏幕滚动
background符合属性
background：background-color background-image background-repeat background-attachment background-position
背景半透明
background：rgba（0，0，0，0.3）
a是alpha的缩写，代表透明度，取值范围0-1之间
我们习惯吧0.3写成.3，0是可以省略掉的
背景透明指的是盒子背景半透明，对盒子内容没有影响
背景半透明是CSS3新增的属性，只有IE9以上支持，但是实际在开发中不太关注兼容性，直接用
CSS三大特性
层叠性
相同选择器设置相同样式，此时新的样式会覆盖掉旧的样式
样式冲突时，遵循就近原则，那个样式距离结构进，就用哪一个
样式不冲突的时候，不会层叠
继承性
在css中，子标签会继承父标签某些样式
优先级（权重）
选择器相同执行层叠行
不同执行优先级（根据选择器权重来执行）
权重由四组数字构成
使用复合选择器，那就将复合选择器中基础选择器的权重相加即可
继承的权重是0.0.0.0，父元素权重在高对于子元素来说，继承下来的权重都是0.0.0.0
|
