我的账户
猩码学苑

专注C++开发菁英教育

亲爱的游客,欢迎!

已有账号,请

如尚未注册?

王涛-20221013-CSS2

[复制链接]
黑桃K 发表于 2022-10-13 23:37:03 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
CSS的复合选择器
        * 什么是符合选择器
                * 符合选择器是对基本选择器进行组合而成的选择器
        * 复合选择器
                * 后代选择器
                        * 也叫做包含选择器,可以选择父元素里面所有符合条件的子元素
                        * 1.元素1和元素2要用空格隔开
                        * 2.元素1是父级,元素2是子级
                        * 3.元素2是子辈,也可以是孙辈,只要是元素1的后代都可以
                        * 4.元素1和元素2可以是任意的基础选择器
                * 子选择器
                        * 子选择器,也称亲儿子选择器,会选择父级元素最近的一级子元素
                        * 1.元素1和元素2要用>隔开
                        * 2.元素1是父级,元素2是子级,最终选择的是元素2
                        * 3.元素2必须是亲儿子,也就是距离元素1最近一级的元素2,孙子重孙都不被选择
                * 并列选择器
                        * 并集选择器可以选择多组标签,同时为他们定义相同的样式,通常用于集体声明,每组标签用,逗号隔开
                * 伪类选择器
                        * 链接伪类选择器
                                * 主要是给链接选择器上附加特殊效果
                                * 四个链接伪类,使用顺序为:lvha,顺序错误影响显示效果
                * focus伪类选择器(焦点伪类选择器)
                        * 焦点伪类选择器是获取光标所在的位置,进行样式变化,主要针对表单元素设置
                * 伪类选择器总结
                        * 1.伪类和css的类一样,可以附加在其他选择器上
                        * 2.向其他选择器附加伪类选择器时,选择器必须要支持伪类选择器所声明的状态,否则无法声明
        * CSS的元素显示模式
                * 元素显示模式的分类
                        * 块级元素
                                * h1~h6标签,p标签,div标签,ul标签,ol,li等
                                * 特点
                                        * 1.独占一行
                                        * 2.高度和宽度都是可以控制的(内外边距可以控制)
                                        * 3.宽度默认是父级的100%
                                        * 4.块级元素里面可以放其他块级或者其他行内元素
                                * 注意
                                        * 文字类的元素不可以放块元素:比如p和h内部不能放div
                        * 行内元素
                                * a标签,span,strong,b,em,i等,span是典型的行内元素
                                * 特点
                                        * 1.行内元素在一行内可以显示多个
                                        * 2.无法设置宽高
                                        * 3.默认的宽高是本身的内容宽高
                                        * 4.行内元素内只能容纳文本或者其他行内元素
                                * 注意
                                        * 1.链接标签中不能再放链接
                                        * 2.在a标签内要放入其他块级元素,最好把a标签转化为块级元素更安全
                        * 行内块元素
                                * img标签,input标签,td标签等
                                * 特点
                                        * 1.和相邻的行内块元素在一行上,但是之间有空隙,一行可以显示多个
                                        * 2.默认宽度是本身内容的元素(行内元素特点)
                                        * 3.高度和宽度都可以控制(块元素特点)
                * 元素显示模式的转换
                        * 转换为块级元素:display:block
                        * 转换为行内元素:display:inline
                        * 转行为行内块元素:display:inline-block
                * 文字垂直居中
                        * css没有之间调整垂直居中的代码
                        * 让文字的行高等于盒子的高度就可以了
        * CSS背景属性
                * 背景颜色使用background-color设置,默认transparent(透明)
                * 背景图片background-image:url(地址);默认none
                * 背景图片平铺background-repeat1.背景不平铺:no-repeat2.背景横向平铺:repeat-x3.背景纵向平铺:repeat-y4.背景平铺(默认):repeat
                * 背景图片定位background-position:x,y
                        * 1.方位名词设置
                        * 2.具体像素单位
                        * 3.方位名词和像素值混合使用
                        * 背景图片方位的总结
                                * 1.参数是方位名称
                                        * 如果指定两个方位,没有先后顺序
                                        * 如果指定一个,另外一个省略,则省略默认为center(居中)
                                * 2.参数是精确的像素单位
                                        * 如果参数是精确的像素值,第一个是x坐标,第二个是y左边
                                        * 如果只指定一个数值,这个数值一定是x坐标数值,y坐标默认居中
                                * 3.参数是混合单位
                                        * 如果参数是混合单位,第一个值是x坐标,第二个值是y坐标
                * 背景图片附着(滚动)background-attachment
                        * scroll滚动(默认)
                        * fixed固定
                * 背景的符合写法background
                        * background:颜色 地址 平铺 滚动 位置
        * css三大特性
                * 层叠型
                        * 概念1.相同的选择器设置相同的格式时,新的样式会覆盖旧的样式
                        * 层叠性的原则1.样式冲突,遵循的是就近原则2.样式不冲突,不重叠
                * 继承性1.子标签会继承父标签的某些格式,子承父业
                * 优先级(权重)
                        * 1.当选择器相同时,遵循层叠性原则
                        * 2.当选择器不同时,遵循优先级(权重)原则
                        * 注意点
                                * 1.权重是由四组数字组成,但是不会进位
                                * 2.可以理解为类选择器永远大于元素选择器,以此类推
                                * 3.等级从左向右判断,如果某位相同,就判断下一位
                                * 4.继承的权重时0,不论父元素的权重有多高
                        * 权重叠加
                                * 1、div ul li 权重是0,0,0,3
                                * 2、.nav ul li 权重是0,0,1,2
                                * 3、a:hover 权重0,0,1,1

回复

使用道具 举报

关注0

粉丝0

帖子54

发布主题
大家都在学
课堂讨论
一周热帖排行最近7x24小时热帖
关注我们
专注C++菁英教育

客服电话:18009298968

客服时间:9:00-21:00

猩码学苑 - 专注C++开发菁英教育!( 陕ICP备2025058934号-1 )

版权所有 © 陕西菁英数字科技有限公司 2023-2026