我有以下结构:
<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
是一个可能存在或可能不存在的导航,具体取决于查看的页面。如果导航存在,我需要以不同的方式显示徽标(调整大小)。
答案 0 :(得分:2)
CSS作为级联工作,然后你永远不能根据它们旁边的内容引用元素,只能根据它们之前的内容引用元素。
选择器的主体始终是与最后一个简单选择器匹配的元素的子集
为此你可能需要Jquery的帮助:
$(document).ready(function (){
if($('.div2').lenght > 0) {
/*actions for .div1 here*/
}
})
答案 1 :(得分:2)
由于两个div的类不同,您可以使用类选择器.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