• 学习css 伪类:has

    学习抖音： @渡一前端提薪课

    首先我们看下:has(selector)是什么

    匹配包含（相对于 selector 的 :scope）指定选择器的元素。可以认为 selector 的前面有一个看不见的 :scope 伪类。它的强大之处是，可以实现父选择器和前面兄弟选择器的功能。支持所有的 CSS 选择符。

    我们举个例子：

    css

    1.   .box1:has(p) {
    2.     color: red;
    3. }
    4.         
    5. .box1:has(span) {
    6.     color: blue;
    7. }
    8. .box1:has(a, div) {
    9.     color: greenyellow;
    10. }

    html

    1. <body>
    2.  
    3.     <div class="box1">
    4.         <p>pppp>
    5.     div>
    6.     <div class="box1">
    7.         <span>spanspan>
    8.     div>
    9.     <div class="box1">
    10.         <a>有pa>
    11.     div>
    12.     <div class="box1">
    13.         <div>有divdiv>
    14.     div>
    15. body>

    结果，.box1:has(p) 就是包含 p 标签的.box1 元素。.box1:has(span)就是包含span的元素，.box1:has(a, div) 就是 包换 a 和包含div的元素

    进阶

    知道这个原理后我们在进阶一下，看看 子的伪类可不可以用。

    css

    1. .box1:has(.red:hover) {
    2.     color: red;
    3. }
    4. .box1:has(.blue:hover) {
    5.     color: blue;
    6. }
    7. .box1:has(.yellow:hover) {
    8.     color: yellow;
    9. }

    html

    1. <div class="box1">
    2.     <div class="red">变红色div>
    3.     <div class="blue">变蓝色div>
    4.     <div class="yellow">变黄色div>
    5. div>

    结果：

    基于这个特效 我们做一个案例

    案例

    直接上代码

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>demo-2title>
    8.  
    9.     <style>
    10.         * {
    11.             padding: 0;
    12.             margin: 0;
    13.         }
    14.         
    15.         .container {
    16.             width: 400px;
    17.             height: 400px;
    18.             border: 2px solid #999;
    19.             position: absolute;
    20.             top: 100px;
    21.             left: 50%;
    22.             transform: translateX(-50%);
    23.             display: grid;
    24.             transition: 0.5s;
    25.             grid-template-columns: 1fr 1fr 1fr;
    26.             grid-template-rows: 1fr 1fr 1fr;
    27.             gap: 5px
    28.         }
    29.         
    30.         .item:nth-of-type(1) {
    31.             background: red;
    32.         }
    33.         
    34.         .item:nth-of-type(2) {
    35.             background: rgb(255, 208, 0);
    36.         }
    37.         
    38.         .item:nth-of-type(3) {
    39.             background: rgb(0, 255, 0);
    40.         }
    41.         
    42.         .item:nth-of-type(4) {
    43.             background: rgb(166, 255, 0);
    44.         }
    45.         
    46.         .item:nth-of-type(5) {
    47.             background: rgb(170, 88, 224);
    48.         }
    49.         
    50.         .item:nth-of-type(6) {
    51.             background: rgba(0, 238, 255, 0.726);
    52.         }
    53.         
    54.         .item:nth-of-type(7) {
    55.             background: rgb(255, 115, 0);
    56.         }
    57.         
    58.         .item:nth-of-type(8) {
    59.             background: rgb(86, 75, 241);
    60.         }
    61.         
    62.         .item:nth-of-type(9) {
    63.             background: rgb(255, 0, 149);
    64.         }
    65.         
    66.         .container:has(.item:nth-of-type(1):hover) {
    67.             grid-template-columns: 2fr 1fr 1fr;
    68.             grid-template-rows: 2fr 1fr 1fr;
    69.         }
    70.         
    71.         .container:has(.item:nth-of-type(2):hover) {
    72.             grid-template-columns: 1fr 2fr 1fr;
    73.             grid-template-rows: 2fr 1fr 1fr;
    74.         }
    75.         
    76.         .container:has(.item:nth-of-type(3):hover) {
    77.             grid-template-columns: 1fr 1fr 2fr;
    78.             grid-template-rows: 2fr 1fr 1fr;
    79.         }
    80.         
    81.         .container:has(.item:nth-of-type(4):hover) {
    82.             grid-template-columns: 2fr 1fr 1fr;
    83.             grid-template-rows: 1fr 2fr 1fr;
    84.         }
    85.         
    86.         .container:has(.item:nth-of-type(5):hover) {
    87.             grid-template-columns: 1fr 2fr 1fr;
    88.             grid-template-rows: 1fr 2fr 1fr;
    89.         }
    90.         
    91.         .container:has(.item:nth-of-type(6):hover) {
    92.             grid-template-columns: 1fr 1fr 2fr;
    93.             grid-template-rows: 1fr 2fr 1fr;
    94.         }
    95.         
    96.         .container:has(.item:nth-of-type(7):hover) {
    97.             grid-template-columns: 2fr 1fr 1fr;
    98.             grid-template-rows: 1fr 1fr 2fr;
    99.         }
    100.         
    101.         .container:has(.item:nth-of-type(8):hover) {
    102.             grid-template-columns: 1fr 2fr 1fr;
    103.             grid-template-rows: 1fr 1fr 2fr;
    104.         }
    105.         
    106.         .container:has(.item:nth-of-type(9):hover) {
    107.             grid-template-columns: 1fr 1fr 2fr;
    108.             grid-template-rows: 1fr 1fr 2fr;
    109.         }
    110.     style>
    111. head>
    112.  
    113. <body>
    114.     <div class="container">
    115.         <div class="item">div>
    116.         <div class="item">div>
    117.         <div class="item">div>
    118.         <div class="item">div>
    119.         <div class="item">div>
    120.         <div class="item">div>
    121.         <div class="item">div>
    122.         <div class="item">div>
    123.         <div class="item">div>
    124.     div>
    125. body>
    126. <script>
    127. script>
    128.  
    129. html>

    效果：

  • 相关阅读:
    lua torch 官方学习教程
    了解多媒体展厅弧幕投影系统收费构成，轻松制定预算
    WebSocket实现方式
    基于STM32单片机一氧化碳(CO)气体监控系统proteus仿真设计
    PaddlePaddle自然语言处理总结
    ESP8266制作的1.44寸TFT显示屏太空人天气时钟（st7735）（增加农历显示）（抄作业）
    NIO和BIO
    小侃设计模式（十四）-职责链模式
    C++ 类型转换
    群接龙拼团小程序开发
  • 原文地址：https://blog.csdn.net/weixin_43845059/article/details/133648896