如何挑选两个组中的元素并应用公共边界？

如何通过两族元素和应用边框一样如何挑选两个组中的元素并应用公共边界？

<div class="row"> 
     <div class="col-md-2"> 
      16 
      16 
     </div> 
     <div class="col-md-2"> 
      16 
      16 
     </div> 
     <div class="col-md-2"> 
      17 
      17 
     </div> 
     <div class="col-md-2"> 
      17 
      17 
     </div> 
     <div class="col-md-2"> 
      18 
      18 
     </div> 
     <div class="col-md-2"> 
      18 
      18 
     </div> 
    </div>

元素是动态生成的。如何分组两两并为此应用共同边界？

来源

2017-05-29 jeeva

最后一对真的有一个较小的填充？ – Swellar

不，实际上填充是甚至 – jeeva

它只是最后一对比其他更合适 – Swellar

您可以尝试类似的东西，使用:nth-child

.row { 
 
    margin: 0; 
 
    padding: 0; 
 
    display: flex; 
 
} 
 

 
.col-md-2 { 
 
    padding: 10px; 
 
    font-size: 20px; 
 
    border-top: 1px solid black; 
 
    border-bottom: 1px solid green; 
 
    list-style: none; 
 
    margin: 0; 
 
    background-color: red; 
 
} 
 

 
.col-md-2:nth-child(2n+1) { 
 
    border-left: 1px solid green; 
 
} 
 

 
.col-md-2:nth-child(2n) { 
 
    margin-right: 10px; 
 
    border-right: 1px solid green; 
 
} 
 

 
.col-md-2:nth-child(3), 
 
.col-md-2:nth-child(4){ 
 
    background-color: blue; 
 
}

<div class="row"> 
 
     <div class="col-md-2"> 
 
      16 
 
     </div> 
 
     <div class="col-md-2"> 
 
      16 
 
     </div> 
 
     <div class="col-md-2"> 
 
      17 
 
     </div> 
 
     <div class="col-md-2"> 
 
      17 
 
     </div> 
 
     <div class="col-md-2"> 
 
      18 
 
     </div> 
 
     <div class="col-md-2"> 
 
      18 
 
     </div> 
 
    </div>

来源

2017-05-29 06:46:29

您必须指定类像相似的元素：

<div class='red'></div>

然后在头标记加入：

<head> 
    <style> 
    .red{ 
     background-color:red;} 
    <style> 
</head>

你可能想看看CSS样式：https://www.w3schools.com/cssref/pr_background-color.asp

来源

2017-05-29 06:18:09 Leah

尝试像这样：

.bordered { 
 
    padding: 10; 
 
    display: inline-block; 
 
    border: 1px solid green; 
 
} 
 

 
.blue-pair > div { 
 
    background-color: blue; 
 
    display: inline-block; 
 
} 
 

 
.red-pair > div { 
 
    background-color: red; 
 
    display: inline-block; 
 
}

<div class="bordered blue-pair"> 
 
    <div>15</div> 
 
    <div>15</div> 
 
</div> 
 
<div class="bordered red-pair"> 
 
    <div>16</div> 
 
    <div>16</div> 
 
</div> 
 
<div class="bordered blue-pair"> 
 
    <div>17</div> 
 
    <div>17</div> 
 
</div>

来源

2017-05-29 06:23:57 Swellar

您可以使用CSS3选择器nth-child

div { 
 
    float: left; 
 
    text-align: center; 
 
    width: 20px; 
 
} 
 

 
div:nth-child(2n+1) { 
 
    margin-left: 10px; 
 
    border: 1px solid green; 
 
    border-right: none; 
 
} 
 

 
div:nth-child(2n) { 
 
    border: 1px solid green; 
 
    border-left: none; 
 
}

<div>A</div> 
 
<div>B</div> 
 
<div>C</div> 
 
<div>D</div> 
 
<div>E</div> 
 
<div>F</div>

来源

2017-05-29 06:28:43 anpsmn

其不可能在纯CSS，但它可以使用预处理器等LESS或SASS

算术级数选择连续的元件被地板来实现（第n个孩子（N + 1/2））。

CSS选择器nth-child（）不允许参数中的分数。浏览器自动更正：第n个孩子（n + 1/2）到第n孩子（n + 1）。另外，CSS中没有楼层功能。

来源

2017-05-29 07:18:06 Nasheeda

如何挑选两个组中的元素并应用公共边界？

回答

相关问题