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必须放在最后

练习

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

标签： 优先级