如何挑選兩個組中的元素並應用公共邊界？

如何通過兩族元素和應用邊框一樣如何挑選兩個組中的元素並應用公共邊界？

<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

如何挑選兩個組中的元素並應用公共邊界？

回答

相關問題