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

时间:2013-12-04 16:54:27

标签: css

我有以下结构:

<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是一个可能存在或可能不存在的导航,具体取决于查看的页面。如果导航存在,我需要以不同的方式显示徽标(调整大小)。

5 个答案:

答案 0 :(得分:2)

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

  

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

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

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

答案 1 :(得分:2)

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

将一些特定规则应用于div1
.div1 {
   /* div1 styles */
}

答案 2 :(得分:1)

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

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

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

答案 3 :(得分:1)

虽然在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不是为此而设计的。

答案 4 :(得分:-4)

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

.div1 ~ .div2{
   Do your stuff here
}

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

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