@media 位于 ::before,::after 伪元素内

Question

媒体查询可以在选择器内部使用，但它们似乎在纯 CSS 的伪元素内部被忽略。

示例：

  div.container {
    color: red;
    &::before {
      display: inline-block;
      content: "shouldn't display.";
      
      @media screen and (min-width: 1px) {
        content: "should display?";
      }
      
    }
    
    @media screen and (min-width: 1px) {
      &::before {
        content: "displays?";
      }
    }
  }
  
div.no-nest::before {
  content: "shouldn't display.";

  @media screen and (min-width: 1px) {
    content: "should display";
  }
}

div.no-pseudo {
  
  span.hide {
    @media screen and (min-width: 1px) {
      display: none;
    }
  }
}

<div class="container">
  -- content here.
</div>

<div class="no-nest">
  -- content without nested css
</div>

<div class="no-pseudo">
  <span class="hide">shouldn't display</span>
  <span class="show">should display</span>
  -- content without pseudo
</div>

https://jsfiddle.net/jwe6kcda/1/

这是正确的吗？规范是否说这是不可能的？这通常在 SCSS 中有效，但令我惊讶的是，当制定嵌套 css 规范时，这并没有延续下去，特别是因为它适用于任何

.selector

。

Answer 1

规范明确指出：

嵌套选择器不能表示伪元素（与

:is()

伪类的行为相同）。

-- https://www.w3.org/TR/css-nesting-1/#nest-selector

即就像你不能将“target”

::before

与 `:is():

一起使用一样

*:is(::before){ /* never matches anything */ } 
*:has(::before){ /* neither this */ } 

同样的，你不能用

::before

 来引用 

&

*::before { & { /* never matches */ } }

规范指的是讨论，提到未来可能会放宽，但会要求对规范进行实质性改变。不确定是否有可能发生。

• https://github.com/w3c/csswg-drafts/issues/7433
• https://github.com/w3c/csswg-drafts/issues/9492