如果div不包含具有特定id的元素，我如何使用CSS将样式应用于div？

Question

我正在编写一个CSS样式表，将背景图像添加到由其类名标识的div中，如下所示：

.scrollingResultsContainer
{
    background-image: url(https://mdl0133/widget/Images/gradient.gif);
    background-repeat: repeat-x; 
    background-attachment: fixed;
    color:#FFFFFF;
}

这种方法很好，除了我有一个特殊情况，我不希望图像出现在scrollingResultsContainer中。除非scrollingResultsContainer恰好包含具有特定ID的div，否则我如何指定应该应用图像？

不幸的是，我无法修改标记以防止出现这种情况。 我想知道是否可以使用CSS3选择器完成。

Answer 1

你不能用CSS做到这一点。父选择器已被多次提出但总是被拒绝，因为显然它太难以编码或者其他东西： http://www.css3.info/shaun-inman-proposes-css-qualified-selectors/

你不得不使用javascript我很害怕。

Answer 2

CSS4可能会在将来实现这一目标，请参阅http://davidwalsh.name/css4-preview。

Answer 3

如果您事先知道ID，请在CSS中覆盖它。

.scrollingResultsContainer {
    font-size: 200%;
}

#id_of_div {
    font-size: normal;
}

Answer 4

如果您唯一想做的就是阻止图像显示，这对CSS来说相当简单。您可以使用子::before上的<div>伪元素来覆盖图片，并使用z-index来确保图层正确。

演示：

输出：

  

CSS：

.scrollingResultsContainer {
    background-image: url( 'http://placekitten.com/100' );
    border: 1px solid black;
    display: inline-block;
    height: 100px;
    position: relative;
    vertical-align: top;
    width: 100px;
    z-index: -2;
}
.dont-show::before {
    background-color: white;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: -1;
}

HTML：

<div class="scrollingResultsContainer"></div>
<div class="scrollingResultsContainer">
    <div class="dont-show">don't show</div>
</div>
<div class="scrollingResultsContainer"></div>
<div class="scrollingResultsContainer"></div>