1、

    1.  <style>
    2.         div:not(.test){
    3.             /*  也可写成div:not([class="demo"]) */
    4.             /* 也可写成div:not([class]) */
    5.             background-color: red;
    6.             /* 选择class名不是test的 */
    7.         }
    8.     </style>
    9. </head>
    10. <body>
    11.     <div class="demo">1</div>
    12.     <div class="demo">2</div>
    13.     <div class="test">3</div>
    14. </body>

    2、事例：

    <style>
        /* 实例：取消表格中最后一行重叠横线 */
        * {
        margin:0;
        padding:0;
    }
    ul{
        width: 300px;
        border: 1px solid #999;
    }
    li{
        height: 50px;
        margin:0 50px;
    }
    li:not(:last-of-type){
        /* 取消最后一行横线 */
        border-bottom:1px solid black;
    }
    </style>
</head>
<body>
    <ul>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
    </ul>
</body>

    3、root

    <style>
      :root{
          /* 根标签选择器：包含html等等 */
          background-color: green;
      }
      html{
          /* 只在HTML中是根标签 */
          background-color: yellow;
      }
    </style>
</head>
<body>
    <ul>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
    </ul>
</body>

    4、target

    <style>
    div:target{
        /* location.hash = xxx */
        /* 可以用一个元素操作另一个不相关的元素 */
        border: 1px solid red;
    }
    </style>
</head>
<body>
    <a href="#box1">box1</a>
    <a href="#box2">box2</a>
    <div id="box1">1</div>
    <div id="box2">2</div>
</body>

    5、事例：

      <style>
        :root,
        body{
            margin: 0;
            height: 100%;
        }
        #red,
        #green,
        #grey{
            height: 100%;
            width: 100%;
        }
        #red{
            background-color: #f20;
        }
        #green{
            background-color: green;
        }
        #gray{
            background-color: gray;
        }
        div[id]:not(:target) {
            display: none;
        }
  div.button-wrapper{
      position: absolute;
      width: 600px;
      top: 400px;
  }
  div.button-wrapper a{
      text-decoration :none;
      color: #fff;
      background-color: #fcc;
      font-size: 30px;
      border-radius: 3px;
      margin: 0 10px;
  }
    </style>
</head>
<body>
    <div class="button-wrapper">
        <a href="#red" class="bgred">red</a>
        <a href="#green" class="bggreen">green</a>
        <a href="#gray" class="bggray">grey</a>
    </div>
    <div id="red"></div>
    <div id="green"></div>
    <div id="gray"></div>
</body>

    6、

      <style>
      p:last-child{
          /* span:only-child */
          /* p:nth-child(2n+1) :nav-down: n是从0开始查数（自然数）;而css是从1开始查数*/
          /* odd奇数，even偶数 */
          background-color: red;
          /* 注意p:last-child中的p */
          /* E:first-child E:last-child E:only-child E:nth-child(n) E:nth-last-child(n) :都要考虑其他元素的影响，不常用 */
      }
    </style>
</head>
<body>
    <div>
        <span>0</span>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <span>1</span><!--p:last-child：不好使  -->
    </div>
    <p>4</p><!--p:last-child好使  -->
</body>

    7、常用：

    <style>
     /* E:first-of-type E:last-of-type E:only-of-type E:nth-of-type(n) E:nth-of-last-type(n) */
    </style>
</head>
<body>
    <div>
        <span>0</span>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <span>1</span>
    </div>
    <p>4</p>
</body>

    8、E:empty ：

    <style>
    /* E:empty ： */
    div:empty{/* 里面什么元素都没有,空格也不可以,注释可以不算节点*/
        border: 1px solid black;
        height: 100px;
    }
    </style>
</head>
<body>
    <div><span>123</span></div>
    <div></div>
    <div>234</div>
    <div> </div>
    <div><!--  --></div>

</body>

    9、E:checked 

     <style>
    /* E:checked ：选择框选中后改变样式 */
    input:checked + span{
        background-color: green;
    }
    input:checked + span::after{
        content: "电话：xxx";
        color: #fff;
    }
    </style>
</head>
<body>
    <label >
        一个小惊喜<input type="checkbox"><span></span>
    </label>
</body>

    10、E:enabled E:disabled

     <style>
    /* E:enabled ：伪类状态 */
     input{
         border: 1px solid #999;
     }
     input:enabled{
        background-color: green ;
     }
     input:disabled{
         border: 1px solid #f20;
         background-color: #fcc;
         box-shadow: 1px 2px 3px #f20;
         /* 阴影效果box-shadow*/
     }
    </style>
</head>
<body>
    <input type="text">
    <input type="text" disabled>
</body>

    11、E:read-only E:read-write（默认形式）

        <style>
    /* readonly:改变不了文字 */
    input:read-only{
        color: red;
    }

    </style>
</head>
<body>
    <input type="text" >
    <input type="text" readonly value="瞅着吧">
</body>

    12、作业手风琴，选项卡