Question

如何将元素分组为2并应用

等边框

name | group
------------
bob  | A
bill | A
joe  | B
tim  | B
mei  | B
jen  | B
ben  | B
lyn  | C
eli  | C
fin  | C
hal  | -
kim  | -

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

Answer 1

您必须将类分配给类似的元素，如：

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

然后在head标签中添加：

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

您可能希望查看CSS样式：https://www.w3schools.com/cssref/pr_background-color.asp

Answer 2

您可以使用:nth-child

尝试类似的操作

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 3

尝试这样的事情：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 4

您可以使用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>

Answer 5

纯CSS中不可能，但可以使用LESS或SASS之类的预处理器来完成

选择连续元素的算术级数为floor（nth-child（n + 1/2））。

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

如何选择两个一组的元素并应用共同的边界？

5 个答案: