css选择器和权值计算

选择器分类：

• 简单选择器：元素选择器、class、id、通用选择器（*）

• 属性选择器：

  • 精确匹配属性值

    • [attr]，存在attr属性的所以元素

    • [attr=val]，attr属性等于val的元素

    • [attr~=val]，attr属性值可能有多个，val只是其中被空格分隔的一个

  • 类似正则表达式

    • [attr|=val]，attr属性的值是val或者以（val-）开头的

    • [attr^=val]，attr属性的值，以val开头，包含val

    • [attr$=val]，attr属性的值，以val结尾，包含val

    • [attr*=val]，attr属性的值，包含val子字符串

• 伪类

  • 冒号作为前缀

  • 常见伪类

  • link、visited、hover、active（鼠标按下还没有松开时）

  • focus，当点击时，会同时触发focus和active但只能看到focus

  • checked是否选中、enabled/disabled是否可用、empty是否为空

  • first-child选中其父元素下第一个元素、nth-child（n）第几个、last-child最后一个、nth-last-child（n）选中倒数第n个、only-child选中父元素中唯一的子元素

  • first-of-type匹配其父元素中特定元素的第一个、nth-of-type（n）第n个、last-of-type最后一个、nth-last-of-type（）倒数第n个、only-of-type选中其父元素只有一个该特定元素的元素

  • not（element）非element的元素

  • root，找到根元素，也就是html

  • required（required）、read-only（readonly）选择设置了括号内属性的元素--------read-write（选择没有设置readonly的元素）--optional（选择没有设置required的元素）适用于input、select、textarea

  • in-range/out-of-range，input元素，当前值在/不在min-max限定范围

  •  

• 伪元素

  • 前缀两个冒号

  • ::after 、::before，再所选取的元素后加content内容

  • ::first-letter选择特定元素的首字母，（可与以下属性使用：字体属性、颜色属性、背景属性、外边距属性、内边距属性、边框属性、text-decoration、vertical、align（只有在 float 为 'none' 时）、text-transform、line-height、float、clear）

  • ::first-line选择特定元素的第一行，（可与以下属性使用：字体属性、颜色属性、背景属性、word-spacing、letter-spacing、text-decoration、vertical-align、text-transform、line-height、clear）

  • ::selection，匹配鼠标选中的的部分，（可与以下属性：color、background、 cursor、outline）

  • ::backdrop

• 组合器

  • A，B    匹配满足A（和/或）B的任意元素

  •  

  • A  B     匹配任意元素，满足条件：B是A的后代结点（B是A的子节点，或者A的子节点的子节点）

  • A>B     匹配任意元素，满足条件：B是A的直接子节点

  •  

  • A+B     匹配任意元素，满足条件：B是A的下一个兄弟节点（AB有相同的父结点，并且B紧跟在A的后面）

  • A~B     匹配任意元素，满足条件：B是A之后的兄弟节点中的任意一个（AB有相同的父节点，B在A之后，但不一定是紧挨着A）

 

权值计算：

• 千位：声明在style属性中的

• 百位：id选择器

• 十位：类选择器、属性选择器、伪类

• 个位：元素选择器、伪元素

• 通用选择器、复合选择器（+、>、~、“ ”）、否定伪类（：not）没有影响

 

样式应用：

1.  ！important最高，始终采用这个

2. 权值排序，大的优先

3. 权值一样，后声明的优先