Question

我目前有这样的结构：

<div class="a">Something</div>
<div class="a">Something</div>
<div class="a">Something</div>
<div class="b">Something</div>
<div class="b">Something</div>
<div class="a">Something</div>

如何将相同的课程组合在一起？在这个例子中，我希望所有类中的项目之间没有边距，并且所有classb项目之间没有边距，但是它们应该在不同类别之间有边距。

通过以下路径可以在一定程度上实现：

div {
 margin-top: 20px;
}
.a+.a, .b+.b {
 margin-top: 0px
}

然而，我的整个html结构与margin-bottom结合使用 - 因此我正在寻找一种类似的解决方案，它可以使用margin-bottom而不是margin-top。

Answer 1

可以使用兄弟选择器。我添加到divs下面的片段和一个跨度来说明这一点。您可以使用类或ID将余量设置为范围，但这样您可以更普遍地应用它，只要您有div后跟span，执行边距（或您想要应用的任何样式）

div, span{
    border: 1px solid blue;
    display:block;
    width: 100px;
    height: 30px;
}
div + span {
    margin:10px;
}

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<span>1</span>
<div>5</div>

Answer 2

以下是我目前使用的内容 - 如果没有答案，我会将此标记为解决方案

http://codepen.io/anon/pen/vNRrdo

<div class="a">Class a</div>
<div class="a">Class a</div>
<div class="a">Class a</div>
<div class="a">Class a</div>
<div class="b">Class b</div>
<div class="c">Class c</div>
<div class="c">Class c</div>
<div class="c">Class c</div>
<div class="c">Class c</div>
<div class="a">Class a</div>
<div class="a">Class a</div>
<div class="b">Class b</div>
<div class="b">Class b</div>
<div class="b">Class b</div>
<div class="a">Class a</div>
<div class="c">Class c</div>
<div class="c">Class c</div>

CSS

div {
  width: 200px;
  text-align: center;
  line-height: 50px;
  margin-top: 20px;
}

.a {
  background-color: red;
}

.b {
  background-color: blue;
}

.c {
  background-color: green;
}

.a + .a {
  margin-top: 0;
}

.b + .b {
  margin-top: 0;
}

.c + .c {
  margin-top: 0;
}

这个问题是这个问题使用margin-top。我的整个页面结构使用margin-bottom - 因此我正在寻找一种margin-bottom解决方案，该解决方案以类似的方式工作，无需为每种元素类型进行手动自定义。

Answer 3

或者您只需创建一个margin-bottom课程并将其应用到您想要生效的img代码中。

<img src="image.png/>
<img src="image.png/>
<img src="image.png/>
<img src="image.png/>
<div>Something</div>
<img class="botMargin" src="image.png/>

.botMargin {
    bottom-margin: 20px;
}

Answer 4

在CSS3中，大多数选择器都遵循DOM的流程。

这意味着无法根据元素后面的元素为元素赋予样式。（唯一的例外是nth-last-child pseudos）。

要获得您想要的结果，您需要一个小技巧，使用上边距，并将其设置为减去最低值。（所以总数是0）

<server description="new server">

    <!-- Enable features -->
    <featureManager>
        <feature>jsp-2.3</feature>
        <feature>adminCenter-1.0</feature>
        <feature>jdbc-4.1</feature>
        <feature>jndi-1.0</feature>
        <feature>servlet-3.1</feature>
    </featureManager>

    <httpEndpoint host="localhost" httpPort="9080" httpsPort="9443" id="defaultHttpEndpoint"/>

    <applicationMonitor updateTrigger="mbean"/>                 

<!-- Define your admin user name and password -->
    <quickStartSecurity userName="admin" userPassword="password"/>

<!-- Define a keystore for the HTTPS port -->
    <keyStore id="defaultKeyStore" password="Liberty"/> 

<!-- Allows remote file access for config changes -->
<remoteFileAccess>
  <writeDir>${server.config.dir}</writeDir>
</remoteFileAccess> 

    <!-- <applicationMonitor updateTrigger="mbean"/> -->
    <webApplication id="TestPage" location="TestPage.war" name="TestPage"/>
    <webApplication id="MonitoriaAtendimento" location="MonitoriaAtendimento.war" name="MonitoriaAtendimento"/>

    <include location="${shared.config.dir}/dataSource.xml"/>
</server>

div {
  height: 50px;
  margin: 10px;
}

.a {
  border: solid 1px red;
}

.b {
  border: solid 1px green;
}

.a+.a, .b+.b {
   margin-top: -10px;
}

Answer 5

您可以使用jQuery执行此操作。

$( "img" ).next( "div" ).css('margin','10x 0px');

css - 将相同的类组合在一起

5 个答案: