菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 王涛-20221013-CSS2 [打印本页]

作者: 黑桃K 时间: 2022-10-13 23:37
标题: 王涛-20221013-CSS2
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

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)