css选择器权重及伪类选择器的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
    /*权重为0 0 1*/
    h1{
        color: yellow;
    }
    /*此时h1标签显示为黄色*/
    /*权重为0 1 1*/
    h1.title{
        color:red;
    }
    /*此时h1标签内容显示为红色*/
    /*权重为1 0 0*/
    h1.title#title{
        color: blue;
    }
    /*此时h1标签内容显示为蓝色*/
/*  提升权重  */
/*   权重为 1 1 2 */
    body > h1.title#title{
        color: pink;
    }
    /*此时h1标签内容显示为粉色*/
    /*  伪类使用方法  */
    .list>.item:first-of-type{
        color: red;
    }
    /*使ul下面的第一个li标签内容显示为红色*/
    .list>.item:last-of-type{
        color: red;
    }
    /*使ul下面的最后一个li标签内容显示为红色*/
    .list>.item:nth-of-type(n+3){
        color: blue;
    }
    /*使ul下面的从第三个标签开始后面的li标签的内容变为蓝色*/
    .list>.item:nth-of-type(-n+3){
        color: pink;
    }
    /*使ul下面的从第三个标签开始前面的li标签的内容变为蓝色*/
</style>
</head>
<body>
  <h1 class="title" id="title">权重权重权重</h1>
  <ul class="list">
      <li class="item">内容</li>
      <li class="item">内容</li>
      <li class="item">内容</li>
      <li class="item">内容</li>
      <li class="item">内容</li>
      <li class="item">内容</li>
      <li class="item">内容</li>
      <li class="item">内容</li>
  </ul>
</body>
</html>