如何 select 没有特定 class/es 的 Div ID

Question

我正在开发一个 Web 应用程序，我有一个 ID = WebPartWPQ2 的 div。我定义了以下 css 规则来定义它的最小宽度：-

#WebPartWPQ2  {
    min-width:1280px;
}

目前这将适用于所有具有此 ID 的 Div。但目前我有以下 div :-

<div id="WebPartWPQ2" class="ms-wpContentDivSpace " style="" allowexport="false" allowdelete="false" allowremove="false" width="100%" haspers="false" webpartid2="e5a46e55-7c76-4d8c-be2c-e3022b7080fc" webpartid="e8865b18-0e92-4276-9945-9091e47e7b0f">

它有关联的 ID 和一个名为 "ms-wpcontentDivSpace" 的 class，那么我如何从上面的 css 规则中排除这个具有 class 的 Dic？

Answer 1

#WebPartWPQ2.ms-wpContentDivSpace {
    min-width: 0; /*fallback*/
    min-width: initial;
}

您也可以将声明更改为：

#WebPartWPQ2:not(.ms-wpContentDivSpace) {
    min-width:1280px;
}

我个人觉得第一个比较好读

Answer 2

首先，同一个文档中的多个元素共享同一个ID是不对的。如果你决定给一个元素一个 ID，它必须是 unique.

如果你想区分元素组，类就是为了这个目的。

Answer 3

ID代表标识符，意思是必须是唯一的。如果您打算在同一页面的更多标签上使用相同的规则并且不重复 ID，请使用 class 而不是 ID。

.WebPartWPQ2:not(.exception)  {
    min-width:1280px;
}

<div class="ms-wpContentDivSpace WebPartWPQ2 exception" style="" allowexport="false" allowdelete="false" allowremove="false" width="100%" haspers="false" webpartid2="e5a46e55-7c76-4d8c-be2c-e3022b7080fc" webpartid="e8865b18-0e92-4276-9945-9091e47e7b0f">

Answer 4

:not() 选择器会很有用，正如其他人已经提到的那样。它在现代浏览器中有很好的支持，但不是 IE8。

如果您需要 IE8 友好的解决方案，请首先声明 大多数 时间为真的规则：

#WebPartWPQ2  {
    min-width:1280px;
}

然后声明一个规则，以更高的特异性覆盖第一个规则：

#WebPartWPQ2.ms-wpContentDivSpace {
    min-width: initial;
}

如何 select 没有特定 class/es 的 Div ID

how to select a Div ID that does not have a specifc class/es

html

css

css-selectors