css 常用选择器-css 选择器优先级

常用选择器

  • 元素选择器
    选择器 说明
    通配选择器(*) 会匹配所有元素,一般不建议使用
    类型选择器 根据标签类型名进行选择,也叫标签选择器
    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必须放在最后

练习

  • 预习:表格、布局、定位、边框、内补白、外补白、盒子模型等
  • 效果:布局京东首页

发表评论 X

电子邮件地址不会被公开。 必填项已用*标注

姓名不能为空
填写正确的email