1. 实例演示选择器权重,并写出详细计算过程

id: 百位class: 十位tag: 个位

如：

  1. body h1 {
  2.     color: violet;
  3. }

计算过程

它的id为0，class为0，tag为2。所以它的权重就是 : 0,0,2

!important: 是最高指示,忽略任何权重

  1. h1 {
  2.     color: chartreuse !important;
  3. }

2. 实例演示常用伪类选择器,并写出参数计算过程

:nth-of-type(an+b)

  1. a: 系数, [0,1,2,…]
  2. n: [0,1,2,3,….]
  3. b: 偏移量, 从0开始注: 计算出来的索引,必须是有效, 从1开始

  1. .list> :nth-of-type(-n + 3) {
  2.     background-color: lightgreen;
  3. }

参数计算过程

/ -10 + 3 = 3-11 + 3 = 3-1 = 2-12 + 3 = 3-2 = 1-1*3+3 = 3-3 = 0

[3,2,1] */

  1. .list> :nth-of-type(odd) {
  2.     background-color: lightgreen;
  3. }
  4. .list> :nth-of-type(even) {
  5.     background-color: lightgreen;
  6. }

odd为奇数, even为偶数。