1020作业

作业内容：

实例演示权重的原理与计算方式
实例演示结构伪类,通过位置关系匹配子元素

实例演示权重的原理与计算方式

试验

试验内容：高权重的CSS样式会覆盖低权重CSS样式，即使高权重的CSS写在低权重CSS之前。

html

  <body>
    <ul class="list">
      <li class="li first">item1</li>
      <li class="li">item2</li>
      <li class="li">item3</li>
      <li class="li">item4</li>
      <li class="li">item5</li>
      <li class="li">item6</li>
      <li class="li">item7</li>
      <li class="li">item8</li>
    </ul>
  </body>

css

li {
  color: red;
}

效果

修改css

ul li {
  color: blue;
}
li {
  color: red;
}

效果

原理和计算

最终颜色为蓝色的原因是：ul li的权重高于li。
两个选择器权重的计算：
权重的表示是(id的数量, class的数量, tag的数量)，ul和li都是标签，因此ul li的权重是(0, 0, 2)，li的权重是(0, 0, 1)。前者的权重大于后者的权重，所以最终的颜色是蓝色。

同理，如果修改css

.first {
  color: red;
}
ul li {
  color: blue;
}

效果

这是因为.first的权重是(0, 1, 0)，而ul li的权重是(0, 0, 2)，前者权重大于后者，因此item1呈现红色。

实例演示结构伪类,通过位置关系匹配子元素

html

    <ul class="list">
      <li class="li first">item1</li>
      <li class="li">item2</li>
      <li class="li">item3</li>
      <li class="li">item4</li>
      <li class="li">item5</li>
      <li class="li">item6</li>
      <li class="li">item7</li>
      <li class="li">item8</li>
    </ul>

匹配一个

匹配第一个

.list > li:first-of-type {
  background-color: lightgreen;
}

效果

匹配最后一个

.list > li:last-of-type {
  background-color: lightgreen;
}

效果

匹配一组

正向匹配

a=1是正向匹配
匹配全部

.list > li:nth-of-type(n) {
  background-color: lightgreen;
}

效果

从第五个开始获取

.list > li:nth-of-type(n + 5) {
  background-color: lightgreen;
}

效果

反向匹配

a=-1是反向匹配
匹配前五个

.list > li:nth-of-type(-n + 5) {
  background-color: lightgreen;
}

效果