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

    Python编程 wuya 121次浏览 已收录 0个评论

    常用选择器

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

    练习

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

    学海无涯 , 版权所有丨如未注明 , 均为原创丨转载请注明css 常用选择器-css 选择器优先级
    喜欢 (0)
    发表我的评论
    取消评论
    表情 加粗 删除线 居中 斜体 签到

    Hi,您需要填写昵称和邮箱!

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址