Question

我需要帮助根据ID选择以下DIV，但使用单个style.css文件排除两种不同类型页面中的一些子DIV：

PAGE1：

...
<div id="main">
    <div id="post"> selected </div>
</div>
...

PAGE2：

...
<div id="main">
    <div id="maincontent"> selected </div>
    <div id="singlepost">
        <div id="post"> selected </div>
        <div id="comments"> excluded </div>
    </div>
    <div id="sidebar"> excluded </div>
</div>
....

我尝试过：

#main > :not(#sidebar), #singlepost > :not(#comments) a {
        color: rgb(88, 134, 76) !important;
}

（！重要的是覆盖一些我无法改变的内联CSS）

结果很糟糕，因为Chrome只识别#main > :not(#sidebar),并忽略#singlepost > :not(#comments) a，因此将所有文字转换为此颜色，而不仅仅是链接，并且只排除<div id="sidebar">，而不是<div id="comments?> }。

我也尝试过：

#singlepost > :not(#comments) a {
        color: rgb(88, 134, 76) !important;
}

#main > :not(#sidebar) a {
        color: rgb(88, 134, 76) !important;
}

现在一切正常，但不排除<div id="comments">。

请帮忙，丹

Answer 1

尝试使用#comments为某个属性覆盖!important的样式。

Answer 2

您可以使用班级名称：

<div id="main">
    <div id="maincontent" class="selected"> selected </div>
    <div id="singlepost" class="selected">
        <div id="post" class="selected-items"> selected </div>
        <div id="comments" class="notSeleted-item"> excluded </div>
    </div>
    <div id="sidebar" class="notSelected"> excluded </div>
</div>

你会使用这个类，如下：

.selected {/*your style*/}
.selected-item a{/*your style*/}

Answer 3

你不能这样做吗

#maincontent, #post {
  color: rgb(88, 134, 76);
}

example

因为您正在使用ID。

另一种方法是为他们创建一个类。 example

选择基于ID的多个DIV，不包括多个子DIV

3 个答案: