本帖最后由 你又脸红了 于 2022-11-11 21:53 编辑
一，今日内容：css的复合选择器
1.什么是复合选择器
复合选择器是建立在基础选择器之上，对基础选择器进行组合形成的。
2.优点
复合选择器可以更加准确、高效的选择目标元素
3.常用的复合选择器
后代选择器
后代选择器是可以选择父元素里面的子元素，外层标签写在前面，内层标签写在后面，中间用空格隔开。
语法：
1.元素1 元素2{样式声明}
2.元素1是父级 元素2是子级
3.元素2可以是孙子，也可以是儿子，只要它是元素1的后代即可
4.元素1和元素2可以是任意的基础选择器
子选择器
子元素选择器只能选择作为某一元素的最近的一级子元素，简单理解就是亲儿子选择器
语法：
1.元素1>元素2{样式声明}
2.元素1和元素2之间要用”>“大于号隔开
3.元素2必须是元素1的亲儿子。孙子，重孙都不可以
并集选择器
并集选择器可以选择多组标签，同时为他们来指定相同的样式，通常用于集体声明。
注意点：
1.并集选择器中每一组选择器之间要有”，”逗号隔开；
2.每一组选择器可以是任意类型的选择器，基础选择器复合选择器都可以。
伪类选择器
1，链接伪类选择器
1.：link选择所有未被访问过的链接
2.：visited选择所有已经被访问过的链接
3.：hover选择所有目标鼠标悬停时侯，来选择状态
4.：active选择所有链接当鼠标点击时的状态
注意：
如果四个伪类选择器都要使用，按照lvha的顺序来进行设置（love hate）
如果想要给其他选择器添加伪类，这个选择器必须要有伪类的状态，否则不可以使用，实际工作中：hover链接伪类用到最多
2，焦点伪类选择器
：focus来实现焦点元素的样式设置
语法：
input：focus{样式声明}
一般焦点伪类选择器都是和input标签联合使用的，因为input标签具有聚焦的状态
2，css的元素显示模式
什么时元素的显示模式：
元素在网页中的显示状态就是它本身的显示模式，比如：h1标签自己独占一行，span标签一行显示多个，div标签自己独占一行
HTML元素显示模式的分类
1 块模式
特点：自己独占一行
宽度默认的时父级宽带的百分之百
本身也可以是容器或者是盒子，；里面可以放其他的行内或者块元素
高度和宽度都是可以设置的，同样，内外边界也是可以控制的
常见的块元素：h1-h6 div标签 p标签 ul ol li标签等，其中div是最典型的块元素
注意点：
文字剋的元素不能使用块级元素。比如：p标签里不能放div标签
2 行内元素
特点：
相邻的行内元素会在一行上进行显示
宽度设置都是无效的
默认的宽高是他本身内容的高度
行内元素只能容纳文本或者其他的行内元素
比如span里面不要放div标签 相邻的行内元素之间会有空隙
常见元素
<a>,<strong>,<em>,<span>,<ins>等等
主题点：
链接里面不可以再放链接
如果a标签内要放一个块级元素，要将a表签模式转化为块级更安全
3 行内块元素
特点：
1’相邻的行内块元素在一行上显示，并且有空白缝隙（行内元素特点）
2、默认宽度是他本身内容的宽度（行内元素特点）
3、高度和宽度可以进行设置（块级元素的特点）
常见的行内块元素
input、img、td标签等等
元素显示模式的转化
转化为块级元素：display：block;
转化为行内元素：display：inline；
转化为行内块元素：display：inline-block
3、css的背景属性
背景颜色
background-color
属性值：颜色单词/十六进制/rgb
默认值是：transparent（透明色）
背景图片
background-image
属性值：url（图片路径）
背景平铺
background-repeat
属性值：
repeat默认值，代表背景图片的横向和纵向上都是平铺
no-repeat 代表背景图片不平铺
repeat-x 代表背景图片在横向上平铺
repeat-y 代表背景图片在纵向上平铺
背景图片定位
background-position
属性值：
精确的像素值单位
1 如果用精确单位来定义图片，第一个值是x轴坐标，第二个值是y轴坐标
2 如果只写一个单位，就代表设置x轴的便宜像素值，y轴是默认居中的
方位名词
top、center、bottom （y轴的方位名词）
left、center、right（x轴的方位名词）
注意点：
方位名词没有先后顺序，因为方位名词自带x轴或者y轴的定位属性
如果指定了一个方位名词，另一个省略，则第二个方位名词默认居中（center）
方位名词和精确的单位可以混合使用
背景图片的滚动
background-attachment
属性值：
scrool：默认值，图片随着屏幕进行滚动
fixed：图片不跟屏幕滚动
背景的复合写法
background
一般默认的属性顺序：bankground-color bankground-image banckground-repeat background-attachment background-postion
实际开发中我们一般会采用复合写法
背景半透明
语法：
background：rgba（0.0.0.0.3）；
a是alpha的缩写，代表透明的的意思，取值范围在0-1之间
我们习惯把0.3写为.3、0是可以省略掉的
背景半透明指的是盒子半透明，对盒子的内容不受影响
背景半透明是css3新增的属性，只有在ie9以上才会支持，但是实际开发中不太关注兼容性的写法，直接用就可以了
4、css的三大属性特征
层叠式
相同的选择器设置相同的样式，此时新的样式会覆盖掉旧的样式
层叠性原则
样式冲突的时候，遵循就近原则，那个样式距离结构更近，就用那个
样式不冲突的时候不会叠层
继承性
在css中，子标签会继承父标签的某些样式，比如文本颜色和字号等等，简单理解就是子承父业
可以被继承的属性：text-、font-、line-、以及color属性
优先级（权重）
概念：
如果选择器相同执行层叠性
如果选择器不同执行优先级（根据选择器的权重来执行）
选择器的权重表
选择器 选择器的权重
继承或者* 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、继承的权重是0，父元素的样式权重再高对于子元素来说，继承下来的样式权重都是0.
二，今日问题
无
三，解决方案
无
|
