zoukankan      html  css  js  c++  java
  • :where()和:is()

    dom结构:

        <h1><b>h1</b></h1>
        <h2><b>h2</b></h2>
        <h3><b>h3</b></h3>
        <h4><b>h4</b></h4>
        <h5><b>h5</b></h5>
        <h6><b>h6</b></h6>

    css:

          h1 > b,
          h2 > b,
          h3 > b,
          h4 > b,
          h5 > b,
          h6 > b {
            color: hotpink;
          }

      可以写成:

          :where(h1, h2, h3, h4, h5, h6) > b {
            color: hotpink;
          }

      或:

          :is(h1, h2, h3, h4, h5, h6) > b {
            color: hotpink;
          }

    :where()和:is()的区别?

      权重不同,:where()的权重为0,:is()的权重为最强的选择器

          h1 > b,
          h2 > b,
          h3 > b,
          h4 > b,
          h5 > b,
          h6 > b {
            color: hotpink;
          }
          :where(h1, h2, h3, h4, h5, h6) > b {
            color: red;
          }

      此时:where()的样式被原来的样式覆盖

          h1 > b,
          h2 > b,
          h3 > b,
          h4 > b,
          h5 > b,
          h6 > b {
            color: hotpink;
          }
          :is(h1, h2, h3, h4, h5, h6) > b {
            color: red;
          }

      此时:is()的样式会覆盖原来的样式

  • 相关阅读:
    前端 --> CSS基础
    前端 css 补充内容
    前端 ---> HTML
    MySQL数据库 -- Navicat、pycharm连接数据库
    mysql数据库 --表查询
    IOC Unity
    泛型2
    泛型1
    特性 Attribute
    里氏替换原则
  • 原文地址:https://www.cnblogs.com/wuqilang/p/15165620.html
Copyright © 2011-2022 走看看