1020 css权重和选择器作业

代码实例

<style>
    /*权重为0 0 1*/
    li{
      color: red;
    }
    /*权重为0 1 1*/
    li.item{
      color: red;
    }
    /*权重为1 1 1*/
    li.item#two{
      color: red;
    }
    /* 提升权重 */
    /* 权重为1 1 2 */
    ul li.item#two{
      color: blue;
    }
    /* 此时第一个li元素的颜色为orange色 */
    /* ul li:first-of-type{
      color: orange;
    } */
    /* 此时第二个li元素的颜色为orange色 */
    /* ul li:nth-of-type(2){
      color: orange;
    } */
    /* 此时最后一个li元素的颜色为orange色 */
    /* ul li:last-of-type{
      color: orange;
    } */
    /* 此时第2，4，6...的li元素为orange色 */
    /* ul li:nth-of-type(2n){
      color: orange;
    } */
    /* 此时所有li元素都为orange色 */
    /* ul li:nth-of-type(n + 1){
      color: orange;
    } */
    /* 此时从每三个li元素开始，都为orange色 */
    /* ul li:nth-of-type(n + 3){
      color: orange;
    } */
    /* 此时从第三个元素开始，每隔一个li元素都为orange色 */
    /* ul li:nth-of-type(2n + 3){
      color: orange;
    } */
    /* 此时前三个li元素为orange色 */
    ul li:nth-of-type(-n + 3){
      color: orange;
    }
  </style>
  <ul>
    <li class="item">item1</li>
    <li class="item" id="two">item2</li>
    <li class="item">item3</li>
    <li class="item">item4</li>
    <li class="item">item5</li>
    <li class="item">item6</li>
    <li class="item">item7</li>
    <li class="item">item8</li>
  </ul>