Question

我想在一张图片上放置几行文字，它们之间有相同的分隔。

我认为使用相邻的选择器是这样的：

.text-box + .text-box{
    margin-top:40px;
}

会在每个连续的text-box元素之间引入40 px的间隔，但我发现它只在第二个和第一个元素之间起作用，所以第三个元素与第二个元素放在同一个位置，即，第一个元素的边距为40px，而我期望第二个元素的边距为40px，因此第一个元素的边距为40 + 40px。

有可能这样做吗？

这是我的代码： CSS：

.text-box{
    z-index:100;
    position:absolute;
    right: 600px;
    background-color:#404042;
    color:#ffffff;
    padding:6px 10px;
}

.text-box + .text-box {
    margin:40px 0px;
}

HTML：

<div class="container">
    <div id="logo"><img src="images/image.jpg"></div>
    <div class="text-box">some text</div>
    <div class="text-box">some other text</div>
     <div class="text-box">some other text</div>
 </div>

Answer 1

问题在于你的绝对定位。删除它，可以应用边距。

使用图像上的文本进行演示（这似乎是意图）：http://jsfiddle.net/EqXYA/1/

CSS相邻的选择器递归？

1 个答案: