問題描述

沒有任何類的元素是否有 CSS 選擇器?例如在 HTML 中

Is there a CSS selector for element without any class? For example in HTML

<section>Section A</section>
<section class="special">Section B</section>
<section class="">Section C</section>

我想選擇 A 部分(或者可能是 A 部分和 C 部分，沒那么重要)，可以這樣說

I would like to select Section A (or maybe Section A and Section C, it does not matter that much), by saying something like

section:not(.*) { color: gray } 

我知道我可以將其定義為 section 并在所有特定類中重新設置它，例如在

I understand that I could define it to section and reset it back in all particular classes, like in

section { color: gray } 
section.special { color: black } 

但這不是我想要的，因為一旦樣式變得復雜，它就不太容易管理，并且在某些情況下很難正確地重置"(當然不是在這個簡化的示例中).

but this is not what I want, because it is not very manageable once the styles get complex and in some cases it is hard to do the "reset" properly (of course not in this simplified example).

推薦答案

使用 section:not([class]) 您可以選擇沒有 class 屬性的每個部分.不幸的是，它不會選擇具有空類屬性值的那些部分.所以除此之外，我們必須排除這些部分:

With section:not([class]) you select every section without the class attribute. Unfortunately, it won't select those sections with an empty class attribute value. So in addition, we have to exclude these sections:

section:not([class]) { /* every section without class - but won't select Section C */
  color: red;
}

section[class=""] { /* selects only Section C */
  font-weight: bold;
}

<section>Section A</section>
<section class="special">Section B</section>
<section class="">Section C</section>

• CSS 屬性選擇器, 瀏覽器支持
• :not

這篇關于沒有任何類的元素是否有 CSS 選擇器?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！