Question

我有以下结构：

<div class="irrelevant"></div>
...
<div class="div1"></div>
...
<div class="irrelevant"></div>
...
<div class="irrelevant"></div>
...
<div class="div2"></div>

我想将一些CSS仅应用于.div1，考虑到它与.div2处于同一级别（不是儿童或父母）。

编辑：为问题提供一些启示：第一个div实际上是我网站的徽标，第二个div是一个可能存在或可能不存在的导航，具体取决于查看的页面。如果导航存在，我需要以不同的方式显示徽标（调整大小）。

Answer 1

CSS作为级联工作，然后你永远不能根据它们旁边的内容引用元素，只能根据它们之前的内容引用元素。

选择器的主体始终是与最后一个简单选择器匹配的元素的子集

为此你可能需要Jquery的帮助：

$(document).ready(function (){
   if($('.div2').lenght > 0) {
     /*actions for .div1 here*/
   }
})

Answer 2

由于两个div的类不同，您可以使用类选择器.div1

将一些特定规则应用于div1

.div1 {
   /* div1 styles */
}

Answer 3

啊，如果div2存在，你想将css应用于div1吗？ CSS无法做到这一点。你需要JS。例如jQuery：

$('.div2').parent().find('.div1')

然后你可以直接应用css或添加另一个类（'div2exists'）并在你的css文件中添加你的风格

Answer 4

虽然在CSS中有这样的方法，但我个人不建议这样做。

只有当我们假设在某个“.container”div中有一个固定数量的div元素时，它才会起作用。这个数字是6，第二个是标识（也是从最后算起的第5个），第5个是导航。

.container {}
.container .logo {}
.container .navigation {}

.container div:nth-child(2):not(:nth-last-child(5)).logo {
    width: 100px;
    height: 100px;
}

.container div:nth-child(2):nth-last-child(5).logo {
    width: 200px;
    height: 200px;
}

第一条规则是徽标带导航
第二条规则是徽标没有导航

再次不要这样做，CSS不是为此而设计的。

Answer 5

您基本上想要选择兄弟姐妹，您会在此链接中找到详细信息CSS Tricks - Child and Sibling Selectors

.div1 ~ .div2{
   Do your stuff here
}

只有在你的标记中存在.div1时才会发生这个块，这是你想要的吗？

修改我注意到你想要的选择器在另一个之前，这个代码只有在这种情况下所需的选择器.div1在.div2之后才能工作.. CSS没有你必须使用jQuery

两个DIV，相同级别，仅通过CSS定位第一个

5 个答案: