Question

我正在使用css2在网站上实现IE7的一些修复。

所以我必须将margin-top:30px和margin-bottom:-30px设为<h2>标题，但我找不到正确的选择器。

<div class="ui-content">
    <h2>Text</h2>
    <ul class="ui-listview">
        List Items
    </ul>
</div>

事实是，每次有H2后跟UL，我必须把这两个属性，所以我想用h2和ul做一个选择器，但我不知道哪个......

感谢帮助我

Answer 1

你不能选择hls，然后选择uls，但你可以反过来做。 E.g。

h2 + ul { /*your css to style the ul*/ }

所以你可以把修正/负边距或其他什么放在ul？

Answer 2

这是一个唯一的ie-ie选择器：

IE 7 only
 *:first-child+html h2 {}

无论如何，我不推荐它，因为几乎没有人再使用这个浏览器了，所以你也不应该专门为它编程。

Answer 3

每次有一个H2后跟一个UL，我必须把这两个属性，所以我想用h2和ul做一个选择器

如@Spudley和@Coop所述，你不能选择一个后面跟着另一个元素的元素（除了罕见的一系列li或td或th和:nth-last-child()，但它更像是一招）。
你可以在纯CSS中做的最接近的事情是测试h2是否跟随（a）其他元素，即如果不单独使用:only-child伪。

来自MDN：

:only-child CSS伪类表示任何元素，它是其父元素的唯一子元素。这与:first-child:last-child或:nth-child(1):nth-last-child(1)相同，但具有较低的特异性。

支持是IE9 +所以如果你想在IE7和IE8中设置这个元素的样式（或者在其后跟ul但不是p或h3 ......的精确情况下），你需要JavaScript或者添加一个类服务器端和这个类的风格。

.ui-content > h2:not(:only-child) {
    margin-top: 30px;
    margin-bottom: -30px;
}

编辑：
你还可以测试H2是否是:first-child和它的父亲的倒数第二个子节点，所以如果它后跟任何元素，它将被设置样式，但如果第二个元素有其他兄弟节点则不会（第三，第四）一，等）

.ui-content > h2:first-child:nth-last-of-type(2) {
    margin-top: 30px;
    margin-bottom: -30px;
}

最简单的代码是;）

<div class="ui-content">
    <h2 class="followed-by-list">Text</h2>
    <ul class="ui-listview">
        List Items
    </ul>
</div>

.followed-by-list {
    margin-top: 30px;
    margin-bottom: -30px;
}

其他技巧意味着对您的项目进行彻底检查（例如，对于下一个项目;））：永远不要将单个margin-bottom设置为内容元素（我的意思是h2，ul，p等等。没关系对于div和“块”以下，并始终将margin-top设置为：

元素（一般情况）ex：p
如果需要，像elt1 + p这样的元素将会有一定的边距，elt2 + p另一个，等等

IE7中的选择器

3 个答案: