css绝对或固定定位时,相同的class重叠怎么办?

在drupal中使用devel模块显示页面执行时间,我习惯将统计结果所在div.dev-query改为透明fixed层显示。

.dev-query {
	position:fixed;
	bottom:2em;
	right:0;
	background:rgba(255,255,255,0.8) !important;
	z-index:1;
}

可7.x的admin_menu模块的devel信息被独立分离出来,造成两个.dev-query,在上面的css控制下,两个层是叠加在一起的。

要将两个相同class的fixed div分开,我首先想到的是first-child、last-child这些伪类,无奈试了半天,它们好像只对元素起作用,对class不起作用。

在stackoverflow找了半天,终于在一个不起眼的答案(也不是最佳答案)里找到有效的方法:

.dev-query ~ .dev-query {
	bottom:8em;
}

上面的css居然可以控制第二个.dev-query,赶紧把这方法记下来。

参考网址:http://stackoverflow.com/questions/2717480/css-selector-for-first-elemen...

文章分类: 
文章标签: