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”的类，那么我如何从上面的css规则中排除这个具有此类的Dic？

Answer 1

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

您也可以将声明更改为：

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

我个人认为第一个更容易阅读。

Answer 2

首先，在同一文档中拥有多个共享相同ID的元素是不对的。如果您决定为元素提供ID，则它必须是唯一。

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

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;
}

如何选择没有特定类/ es的Div ID

4 个答案: