如何在#some_container内仅选择无类名的纯HTML元素？

我来帮你搞定这个CSS选择器的问题！你想要让那一大串元素选择器只作用在#some_container内部、没有类名的纯元素上，对吧？之前直接用#some_container strong这种写法不管用，是因为它会选中容器里所有对应元素，哪怕带类名的也会被命中，而你需要排除掉有类名的元素。

解决方案：给每个选择器增加容器前缀和无类名限定 #

你只需要给原来的每一个元素选择器，都加上#some_container作为前缀，再加上:not([class])伪类来排除带有类名的元素就行。这样改造后的选择器只会匹配#some_container内部任意层级、没有类属性的对应元素。

改造后的完整CSS代码 #

#some_container a:not([class]), 
#some_container abbr:not([class]), 
#some_container acronym:not([class]), 
#some_container address:not([class]), 
#some_container applet:not([class]), 
#some_container article:not([class]), 
#some_container aside:not([class]), 
#some_container audio:not([class]), 
#some_container b:not([class]), 
#some_container big:not([class]), 
#some_container blockquote:not([class]), 
#some_container body:not([class]), 
#some_container canvas:not([class]), 
#some_container caption:not([class]), 
#some_container center:not([class]), 
#some_container cite:not([class]), 
#some_container code:not([class]), 
#some_container dd:not([class]), 
#some_container del:not([class]), 
#some_container details:not([class]), 
#some_container dfn:not([class]), 
#some_container div:not([class]), 
#some_container dl:not([class]), 
#some_container dt:not([class]), 
#some_container em:not([class]), 
#some_container embed:not([class]), 
#some_container fieldset:not([class]), 
#some_container figcaption:not([class]), 
#some_container figure:not([class]), 
#some_container footer:not([class]), 
#some_container form:not([class]), 
#some_container h1:not([class]), 
#some_container h2:not([class]), 
#some_container h3:not([class]), 
#some_container h4:not([class]), 
#some_container h5:not([class]), 
#some_container h6:not([class]), 
#some_container header:not([class]), 
#some_container hgroup:not([class]), 
#some_container html:not([class]), 
#some_container i:not([class]), 
#some_container iframe:not([class]), 
#some_container img:not([class]), 
#some_container ins:not([class]), 
#some_container kbd:not([class]), 
#some_container label:not([class]), 
#some_container legend:not([class]), 
#some_container li:not([class]), 
#some_container mark:not([class]), 
#some_container menu:not([class]), 
#some_container nav:not([class]), 
#some_container object:not([class]), 
#some_container ol:not([class]), 
#some_container output:not([class]), 
#some_container p:not([class]), 
#some_container pre:not([class]), 
#some_container q:not([class]), 
#some_container ruby:not([class]), 
#some_container s:not([class]), 
#some_container samp:not([class]), 
#some_container section:not([class]), 
#some_container small:not([class]), 
#some_container span:not([class]), 
#some_container strike:not([class]), 
#some_container strong:not([class]), 
#some_container sub:not([class]), 
#some_container summary:not([class]), 
#some_container sup:not([class]), 
#some_container table:not([class]), 
#some_container tbody:not([class]), 
#some_container td:not([class]), 
#some_container tfoot:not([class]), 
#some_container th:not([class]), 
#some_container thead:not([class]), 
#some_container time:not([class]), 
#some_container tr:not([class]), 
#some_container tt:not([class]), 
#some_container u:not([class]), 
#some_container ul:not([class]), 
#some_container var:not([class]), 
#some_container video:not([class]) { 
    font: inherit; 
}

验证你的示例结构 #

用你给出的HTML结构测试的话：

<div id="some_container" class="test"> 
    <a href="https://google.com">Applies here</a> <!-- 无类名，会被选中 -->
    <div id="another_container"> 
        <strong>Applies here</strong> <!-- 无类名，会被选中 -->
        <strong class="anything">Does not apply here</strong> <!-- 带类名，被排除 -->
    </div> 
</div> 
<div id="main"> 
    <strong>Does not apply here</strong> <!-- 在#some_container外部，不会被选中 -->
</div>

完全符合你的需求：只有#some_container内部不带类名的元素会被应用font: inherit样式，带类名的元素和容器外的元素都不会受到影响。

内容的提问来源于stack exchange，提问作者holmes0