同一级别的两个div通过CSS只针对第一个div

我的结构如下：

<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

是一个导航，它可能存在，也可能不存在，具体取决于查看的页面。如果导航存在，我需要以不同的方式显示徽标（调整其大小）。

CSS作为级联工作，那么您永远不能根据元素旁边的内容引用元素，只可能根据之前的内容引用元素

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

为此，您可能需要Jquery的帮助：

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

---

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

.div1

.div1 {
   /* div1 styles */
}

---

啊，如果存在div2，那么您想将css应用于div1？CSS不能这样做。你需要JS。jQuery例如：

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

---

然后，您可以直接应用css或添加另一个类（“div2exists”）并在css文件中添加样式

如果您基本上想要选择一个兄弟，您将在该链接中找到详细的帖子

只有当标记中存在.div1时，才会发生此块，这是您想要的吗

编辑：

---

我注意到您所需的选择器位于另一个选择器之前，只有在本例中所需的选择器.div1位于.div2.之后时，此代码才会起作用。。CSS不需要使用jQuery，尽管在CSS中有一种方法可以做到这一点，但我个人不建议这样做

只有当我们假设在一些“.container”div中有固定数量的div元素时，它才会起作用。这个数字是6，第2是徽标（也是从末尾算起的第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不是为此而设计的。

你的问题不清楚。@j08691“不清楚”是什么意思？我需要对

.div1

应用一些CSS规则。带有

不相关

类的div与问题无关，但放在那里是为了说明在涉及的两个div之前、之后和之间可能有一些元素。use.div1{}？或者你的问题在哪里…要么你是一个极端的HTML/CSS新手（这很好），要么我们都不理解你的问题…你不能引用基于下一个元素的元素。。。您可以引用基于before元素的元素，但不能引用before元素之后的元素。我想知道这是否真的是问题所在，因为这很简单。但是，是的，这正是他所要求的：）@RiaElliger yeph我也没有看到任何问题，但这是答案。如果你可以投票赞成，那么就以不清楚的方式结束这个问题。是的，但是他没有提到关于使用jQuery的任何事情——只是纯CSST。这就是为什么我说他需要它来实现他想要的。使用CSS是不可能的。永远，永远！他想以div1为目标，而不是div2:）即使有你的评论，如果所需的选择器在本例中也是错误的。div1在之后。div2你没有选择div1，你选择的是div2如果在div1之后没有这样做，那么你为什么发布此消息？你尝试过此代码吗？？或者只是来自toughtssure，代码有效。它回答了这个问题。我不建议使用它的原因是因为作者想要使用一个不是为任务设计的工具。尽管这种变通方法仍然可行，这可能有助于理解它。

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