- 元素选择器
选择器 说明 通配选择器(*) 会匹配所有元素,一般不建议使用 类型选择器 根据标签类型名进行选择,也叫标签选择器 ID选择器 根据标签的ID属性值进行选择,标签的ID属性值是唯一的 class选择器 根据标签的class属性值进行选择,只要其中一段匹配就行,可以重复 - 关系选择器:也叫层级选择器
选择器 说明 E F 选择所有被E元素包含的F元素 E > F 选择所有作为E元素的子元素F E + F 选择紧贴在E元素后面的F元素 E ~ F 选择E元素后面的所有兄弟元素F - 属性选择器
选择器 说明 E[att] 选择具有att属性的E元素 E[att="val"] 选择att属性值等于val的E元素 E[att~="val"] 选择具有att属性且属性值为一用空格分隔的字词列表,其中一个等于val的E元素 E[att^="val"] 选择具有att属性且属性值为以val开头的字符串的E元素 E[att$="val"] 选择具有att属性且属性值为以val结尾的字符串的E元素 E[att*="val"] 选择具有att属性且属性值为包含val的字符串的E元素 E[att|="val"] 选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素,如果属性值仅为val,也将被选择 - 伪类选择器:选择处于特定状态的元素
- 格式:
E:状态
,选择处于指定状态的E元素 - 说明:超链接的四个状态是有顺序的
link、visited、hover、active
- 格式:
- 伪对象选择器:选择特定状态的元素
- 格式:
E::状态
,选择处于指定状态的内容
- 格式:
选择器优先级
- 问题:当多种选择器选中同一个元素,设置同一属性时,请问以哪个为准?
- 权重:
选择器 权重 通用选择器 0.0.0.0 伪对象选择器 0.0.0.1 标签选择器 0.0.0.1 class选择器 0.0.1.0 属性选择器 0.0.1.0 伪类选择器 0.0.1.0 id选择器 0.1.0.0 !important 1.0.0.0 - 说明:选择器的权重之和作为判断标准,大着优先,相同时后者覆盖前者
- 使用:
- 尽量避免使用多种方式设置样式
- 尽量避免修改同一标签的同一样式
- 优先级不同以高着为准,相同时后者优先
- 若仍然有优先级问题,可以借助调试工具进行查看
- 效率(了解)
- id > class > 标签 > 关系 > * > 属性 > 伪类
尺寸单位
- 说明:HTML中可以不写单位,但是CSS中必须要写
- 单位:
单位 说明 px 像素,绝对单位 % 百分比,相对单位 em 相对于当前元素font-size的倍数 rem 相对于HTML元素font-size的倍数 - 属性:
属性 说明 width 宽度 height 高度 min-width 最小宽度 min-height 最小高度 max-width 最大宽度 max-height 最大高度
字体设置
- 属性说明:
属性 说明 font-style normal正常,italic斜体 font-weight normal正常,bold加粗 font-size 字体大小 font-family 字体族 font 简化方案,顺序固定,font-size和font-family不能省
文本修饰
- 属性说明
属性 说明 text-indent 缩进,建议使用em做单位 text-align 水平对齐方式(left、center、right) line-height 行高,当行高等于容器高度时,可以实现单行文本垂直居中显示 text-decoration 划线(位置、样式、颜色) vertical-align 设置内敛元素在行框内的垂直对齐方式
背景设置
- 属性说明
属性 说明 background-color 背景颜色 background-image 背景图片 background-repeat 平铺方式 background-size 背景图片大小 background-attachment 附着方式,fixed:相对于窗体固定;<br />scroll:相对于元素固定;local:相对于内容固定 background-position 背景图片位置
列表设置
- 属性说明
属性 说明 list-style-type 小图标类型 list-style-position 小图标位置 list-style-image 小图标图片 list-style 复合属性设置,image必须放在最后
练习
- 预习:表格、布局、定位、边框、内补白、外补白、盒子模型等
- 效果:布局京东首页
标签: 优先级
版权声明:除非特别标注,否则均为本站原创文章,转载时请以链接形式注明文章出处。
还木有评论哦,快来抢沙发吧~