Question

希望你能帮我解决这个CSS技巧。

基本上我需要的是这种CSS

if 'container' has sibling 'mySibling' {
    #myDiv{
    }
}
if 'container' has no sibling {
    #myDiv{
    }   
}

对于此HTML

<div id="mySibling"></div>
<div id="container">    
    <div id="myDiv"></div>
</div>

兄弟姐妹有时候不会出现，在这些情况下我需要为myDiv提供不同的CSS

任何帮助都会受到赞赏，我尝试做+和〜选择器，但我认为我没有正确的逻辑。

Answer 1

您可以这样做：

#mySibling + #container #myDiv {
    background-color:blue;
}

这是一个小提示：http://jsfiddle.net/Lzq3S/

注意，我已将id更改为小提琴中的classes只是为了显示两组div元素，但您明白了......

这会分解为myDiv container的孩子，mySibling是{{1}}的兄弟。

Answer 2

首先，请确保您的HTML正确无误;在您的示例中，您忘记指定您是使用ID还是类！ html的可能选项：

<div id="container">
   <div class="mySibling"></div>  
   <div class="myDiv"></div>
</div>

或

<div id="container">
  <div id="mySibling"></div>  
  <div id="myDiv"></div>
</div>

为了您的示例，我们会使用ID，即使some would say it's better practice to use classes

现在为CSS。

+和〜选择器以稍微不同的方式操作。 +选择相邻的兄弟姐妹，而〜选择所有兄弟姐妹。因为CSS没有像实际编程语言那样处理逻辑，所以在应用样式之前，您无法检查容器是否包含某个元素，但是您可以使用兄弟选择器来设置元素的样式。在某些其他元素旁边。

我的建议：

.container #myDiv {
  /* Your styles for #myDiv */
}
.container #mySibling + #myDiv {
  /* Your styles for #myDiv it is next to #mySibling. 
     Will override the styles a */
}

您可以在此处查看示例：http://jsfiddle.net/8r2TZ/。注意，我指定了＃34; myDiv＆＃34;作为一个类，因为我不止一次使用它，我的CSS反映了这一点。

Answer 3

如果你确实需要为每个案例制定一个CSS规则而不依赖于覆盖，那么它仍然是可能的，因为它有一个没有兄弟姐妹的元素的选择器：

#mySibling + #container > #myDiv {
}

#container:only-child > #myDiv {
}

（您甚至可以使用:first-child代替:only-child来实现与旧IE的兼容性，因为#mySibling首先出现。）

CSS兄弟结构if-then

3 个答案: