`：is（）`不适用于伪元素

发布于 2025-02-13 02:06:48 字数 697 浏览 1 评论 0 原文

以下 is（） a>用法不适用于伪元素，有人可以解释吗？

<!DOCTYPE html>
<html lang="zh-Hans">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Test</title>
    <link rel="stylesheet" href="https://unpkg.com/normalize.css" />
    <style>
      body {
        background: #000;
        color: #eee;
      }
      button::before {
        content: 'foo';
      }
      /*


              
              
                
                  原文 
                
              
              The below :is() usages are not working for pseudo-elements, can someone explain?
<!DOCTYPE html>
<html lang="zh-Hans">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Test</title>
    <link rel="stylesheet" href="https://unpkg.com/normalize.css" />
    <style>
      body {
        background: #000;
        color: #eee;
      }
      button::before {
        content: 'foo';
      }
      /* ???? not working */
      :is(button::before) {
        content: none;
      }
      /* ???? not working either */
      button:is(::before) {
        content: none;
      }
    </style>
  </head>
  <body>
    <button>Test</button>
  </body>
</html>


              
              
              
              
              
  
    
      
        
        收藏 0
      
      
        
        分享到微信
        
      
      
        
          
          分享到QQ
        
      
      
        
          
          分享到微博
        
      
    
  


              
              
  
    如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web
    技术交流群。



            
  
    
    
    
  



            

            
            

            
            
            
            
            

  
    发布评论
    
      
        
        
      
      
        
          
          
            
              需要
              登录
              才能够评论， 你可以免费
              注册
              一个本站的账号。
            
          
        
        
          
          
          
          
        
      
    

    
    
      评论（2）
      
        
        
        
  
    
      
    
  
  
    
      
        若沐
      
      
      2025-02-20 02:06:48
    
    
伪元素不能用任何伪级匹配表示；它们在：IS（）中无效。 ^ref 




    
    
      
Pseudo-elements cannot be represented by the matches-any pseudo-class; they are not valid within :is(). ^ref


    
    
    
    
    
      
        
           回复
        
      

      
        
           收藏 0
        
      

      

      
      

      

      
      
        原文 
      
      
    
  


        
        
        
        
  
    
      
    
  
  
    
      
        情深如许
      
      
      2025-02-20 02:06:48
    
    不幸的是，这不是当前规格的一部分，尽管尚不清楚 /尚未解决。
除了当前CSS选择器级别第4级编辑草案（2021年7月2日）规范中的Temani的报价外，同一规范引用了注释，该注释是 3.6.3。伪级伪元素。

第3期澄清：不（）和：IS（）在包含上述伪造时可以使用。

手指交叉，这是在未来的草稿或最终规范中解决的。
我将在以下测试中发布相同的问题。

:is(div, h1)::before {
  content: 'Before - ';
}
:is(div, h1)::after {
  content: ' - After';
}
div:is(::before, ::after),
h1:is(::before, ::after),
:is(div, h1):is(::before, ::after),
:is(div, h1):is(::before),
:is(div, h1):is(::after) {
  content: 'None of these selectors work in Chrome 91 nor in Firefox 91. The :is() pseudo-class doesn\'t work with pseudo element selectors - 16 July 2021 - August Boehm.';
}

/* Select the h1 text to see what works */
h1::selection {
  background: red; 
} 
h1:is(::selection) {
  background: green;
}

/* What is frustrating is that these work */
input:is(:hover, :focus) {
  background: lightblue;
}
<div>div</div>
<h1>h1</h1>
<br>
<input type="text" placeholder="Input">

 https://codepen.io/augustography/pen/pen/pen/ojmprzq 

    
    
      Unfortunately it's not part of the current spec, although is still unclear / unresolved.
In addition to Temani's quote from the current CSS Selectors Level 4 Editors Draft (2 July 2021) specification, the same specification referenced notes this as an unresolved issue in 3.6.3. Pseudo-classing Pseudo-elements.

ISSUE 3    Clarify that :not() and :is() can be used when containing above-mentioned pseudos.

Fingers crossed this is resolved in either a future draft or the final Specification.
I was going to post the same question with the following tests.
:is(div, h1)::before {
  content: 'Before - ';
}
:is(div, h1)::after {
  content: ' - After';
}
div:is(::before, ::after),
h1:is(::before, ::after),
:is(div, h1):is(::before, ::after),
:is(div, h1):is(::before),
:is(div, h1):is(::after) {
  content: 'None of these selectors work in Chrome 91 nor in Firefox 91. The :is() pseudo-class doesn\'t work with pseudo element selectors - 16 July 2021 - August Boehm.';
}

/* Select the h1 text to see what works */
h1::selection {
  background: red; 
} 
h1:is(::selection) {
  background: green;
}

/* What is frustrating is that these work */
input:is(:hover, :focus) {
  background: lightblue;
}
<div>div</div>
<h1>h1</h1>
<br>
<input type="text" placeholder="Input">

https://codepen.io/augustography/pen/OJmprzq

    
    
    
    
    
      
        
           回复
        
      

      
        
           收藏 0
        
      

      

      
      

      

      
      
        原文 
      
      
    
  


        
        
        ~没有更多了~
      
    
    
  

  
  
    
      
        绑定邮箱获取回复消息
        由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！


          
  

  
  

  
  
  
    
      
        关于作者
      
      
        
          
        
        浅笑依然
        暂无简介
      
      
        
          
          文章
        
        
          
          评论
        
        
          29
          人气
        
      
      
        
           关注
        
        
           发私信
        
      
    
  
  

  
  

  
  
  
  
  



  
    
  

  
  
    
      
        相关话题
      
      
        
          
          
            自动 Word 邮件合并未按预期工作
          
          
          
            关于从使用块返回的最佳实践
          
          
          
            我如何获得图表系列？  父母的父母的详细信息？
          
          
          
            根据三角形获取屏幕坐标
          
          
          
            如何设置树结构子节点的顺序
          
          
          
            按大小排序地图
          
          
          
            在 MSAccess 中，在 nvarchar 中插入 NULL 失败
          
          
          
            jQuery-jquery 设置快捷键 插件
          
          
          
            无法加载类型...  升级到 W2K3 和 IIS6 时
          
          
          
            最好的分布式暴力对抗措施是什么？
          
          
        
      
    
  
  
  

  
  
    
      
        更多 
        热门标签
      
      
        
        操作系统
        
        程序设计
        
        IT运维
        
        Linux系统管理
        
        JavaScript
        
        服务器应用
        
        solaris
        
        C/C++
        
        PHP
        
        Shell
        
        BSD
        
        Vue.js
        
        aix
        
        Oracle
        
        Python
        
        HTML
        
        系统管理
        
        HTML5
        
        CSS
        
        前端
        
      
    
  
  

  

  
  
    
      
        更多 
        推荐作者
      
      
        
          
          
            
              
                
              
            
             关注 
            
              十二
              
                文章 0
                评论 0
              
            
          
          
          
            
              
                
              
            
             关注 
            
              飞烟轻若梦
              
                文章 0
                评论 0
              
            
          
          
          
            
              
                
              
            
             关注 
            
              OPleyuhuo
              
                文章 0
                评论 0
              
            
          
          
          
            
              
                
              
            
             关注 
            
              wxb0109
              
                文章 0
                评论 0
              
            
          
          
          
            
              
                
              
            
             关注 
            
              旧城空念
              
                文章 0
                评论 0
              
            
          
          
          
            
              
                
              
            
             关注 
            
              -小熊_
              
                文章 0
                评论 0
              
            
          
          
        
      
    
  
  

  
  

  
    
      
        更多 
        友情链接
      
      
        
        文江博客

`：is（）`不适用于伪元素

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

十二

飞烟轻若梦

OPleyuhuo

wxb0109

旧城空念

-小熊_

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。