2

I need help selecting the following DIVs based on IDs but excluding some of the children DIVs in two different types of pages using a single style.css file:

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>
....

I have tried with:

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

(!important overrides some inline CSS I cannot change)

The result is bad because Chrome only recognizes #main > :not(#sidebar), and ignores #singlepost > :not(#comments) a, thus turning all text into this color, not just links, and only excluding <div id="sidebar">, not <div id="comments?>.

I also tried:

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

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

Now everything works as intended but <div id="comments"> is not excluded.

Please help, Dan

4

3 回答 3

0

尝试覆盖您的样式以#comments用于!important某个属性。

于 2013-06-18T01:00:33.003 回答
0

您可以使用类名：

<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*/}
于 2013-06-18T01:01:06.157 回答
0

你不能就这样吗

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

例子

由于您使用的是ID。

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

于 2013-06-18T01:02:58.550 回答