Html 如何在CSS中组合通配符和非选择器

假设有一个div处于三种可能的状态之一

<div id="apple" />
<div id="apple" class="expanded" />
<div id="apple" class= "collapsed" />

只有当扩展和折叠类不存在时，如何明确地将#apple div作为目标

我想到的是

#苹果：不是[id$=“ed”]

，但它不起作用。是否可以合并这两个选择器

注意：在这种情况下，仅直接对苹果进行风格设计是不够的。只有当expand和collapse类不存在时，才必须显式地进行选择。唯一需要支持的浏览器是最新版本的Chrome。

#apple:not（.expand）：not（.collapsed）

可以正常工作。

#apple:not（.expand）：not（.collapsed）

可以正常工作

#apple:not(.expanded):not(.collapsed)

但是，拥有多个

id=apple

元素是无效的。从技术上讲，您也可以这样做：

#苹果：不（[class~=展开]）：不（[class~=折叠]）

。更一般地说，可能是苹果：不是（[class]）

---

但是，拥有多个

id=apple

元素是无效的。从技术上讲，您也可以这样做：

#苹果：不（[class~=展开]）：不（[class~=折叠]）

。更一般地说，苹果：不是（[class]）

使用属性选择器

[class]

以任何类为目标

既然您想使用

：not

，那么您可以这样做

#apple:not（[class]）

只有在没有任何类的情况下才选择

#apple

工作示例：

#苹果：不是（[class]）{
颜色：红色；
}

无类
扩展类
折叠类

使用属性选择器

[class]

以任何类为目标

既然您想使用

：not

，那么您可以这样做

#apple:not（[class]）

只有在没有任何类的情况下才选择

#apple

工作示例：

#苹果：不是（[class]）{
颜色：红色；
}

无类
扩展类
折叠的类

注意：

[id$=…]

和

类=…

不匹配。注意：

[id$=…]

和

类=…

不匹配。你不会有多个元素具有相同的id。它是同一个DIV，我只是让你看看它在三种不同的状态下会是什么样子。这些状态由JS更改/控制。你不会有多个元素具有相同的ID。它是同一个DIV，我只是向你展示了它在三种不同状态下的样子。这些状态由JS更改/控制。