非零基础自学前端最后一遍一 HTML+CSS 13 Emmet和结构伪类 13.4 其他结构伪类和否定伪类

太过爱你忘了你带给我的痛 2024-03-23 15:10 27阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  13 Emmet和结构伪类
         *   *  13.4 其他结构伪类和否定伪类
             *   *  13.4.1 其他结构伪类
                 *  13.4.2 否定伪类（negation pseudo-class）

![在这里插入图片描述][3cd6f9cd2b114efca2b8ac502a0a0021.png_pic_center]

#### 一 HTML+CSS ####

#### 13 Emmet和结构伪类 ####

##### 13.4 其他结构伪类和否定伪类 #####

###### 13.4.1 其他结构伪类 ######

*  其他常见的伪类(了解):
    
     *  :first-child，等同于:nth-child(1)
     *  :last-child，等同于:nth-last-child(1)
     *  :first-of-type，等同于:nth-of-type(1)
     *  :last-of-type，等同于:nth-last-of-type(1)
     *  :only-child，是父元素中唯一的子元素
     *  :only-of-type，是父元素中唯一的这种类型的子元素
 *  下面的伪类偶尔会使用:
    
     *  :root，根元素，就是HTML元素
     *  :empty代表里面完全空白的元素

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        .box> :first-child {
          
          color: red;
        }
    
        .box> :only-child {
          
          font-size: 20px;
          font-weight: 700;
        }
    
        .box> :only-of-type {
          
          color: purple;
        }
    
        /* html元素 */
        :root {
          
          font-size: 30px;
        }
    
        :empty {
          
          width: 100px;
          height: 100px;
          background-color: #f00;
        }
      </style>
    </head>
    
    <body>
    
      <div class="box">
        <span>我是span元素</span>
        <div>列表内容1</div>
        <div>列表内容2</div>
        <div>列表内容3</div>
        <div>列表内容4</div>
        <div>列表内容5</div>
      </div>
    
    
      <div class="box">
        <div>我是box的div</div>
        <span>我是span元素</span>
      </div>
    
      <div class="box">
        <div>我是box的div</div>
        <div>我是box的div</div>
      </div>
    
      <div class="container"></div>
    
    </body>
    
    </html>

渲染效果

![在这里插入图片描述][5334f101c2db47e89717b85a886a7962.png_pic_center]

###### 13.4.2 否定伪类（negation pseudo-class） ######

*  :not()的格式是:not(x)
    
     *  x是一个简单选择器
     *  元素选择器、通用选择器、属性选择器、类选择器、id选择器、伪类（除否定伪类）
 *  :not(x)表示除x以外的元素

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        /* .item {
          color: red;
        } */
    
        .box :not(.why) {
          
          color: blue;
        }
      </style>
    </head>
    
    <body>
    
      <div class="box">
        <div class="item">列表内容1</div>
        <div class="item">列表内容2</div>
        <div class="why">列表内容3</div>
        <div class="item">列表内容4</div>
        <div class="item">列表内容5</div>
        <div>列表内容5</div>
        <div>列表内容5</div>
        <div>列表内容5</div>
      </div>
    
    </body>
    
    </html>

渲染效果

![在这里插入图片描述][7cd8f27566ff4c07b18ea917faf9e45b.png_pic_center]

[3cd6f9cd2b114efca2b8ac502a0a0021.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/132ad177a5c440559061df1e6a2b4658.png
[5334f101c2db47e89717b85a886a7962.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/dda275d4c3224da1ba61036a7ee018a4.png
[7cd8f27566ff4c07b18ea917faf9e45b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/e02219861b2145978fcb2b62a72dfc29.png