Question

.col-md-auto:first-child:nth-last-child(3),
.col-md-auto:first-child:nth-last-child(3) ~ .col-md-auto {
    width: 33.3333%;
}

我在一个网站的源代码上遇到了这个css并且我很难猜到它实际上是做什么的。我是一个新手，所以发现它很复杂，以处理这个复杂的css.I看看w3学校弄清楚是什么那些符号意味着我可以得到符号的含义，但仍然无法弄清楚整个表达式在做什么。任何建议都会有很大的帮助。

Answer 1

如果正好有3个元素的类=＆＃34; col-md-auto＆＃34;哪个是兄弟姐妹，每个都用父容器的1/3宽度设置它们。

关于4castle解释：

:nth-child()

：nth-child（an + b）CSS伪类匹配具有的元素对于给定的积极因素，在文档树中它前面有一个+ b-1个兄弟姐妹或n的零值。更简单地说，选择器匹配一个数字子元素系列中数字位置的子元素匹配模式an + b。

nth-last-child()

：nth-last-child（an + b）CSS伪类匹配具有的元素在文档树中的a + b-1兄弟姐妹，对于给定的积极或 n值为零。

General sibling selector ~

〜组合器分离两个选择器并匹配第二个选择器元素只有在第一个元素之前，并且两者共享一个共同元素父节点。

.col-md-auto:first-child:nth-last-child(3),
.col-md-auto:first-child:nth-last-child(3)~.col-md-auto {
  width: 33.3333%;
}

.col-md-auto:first-child:nth-last-child(3)选择第一个元素，而.col-md-auto:first-child:nth-last-child(3)~.col-md-auto选择第一个孩子后面的元素，但不第一个孩子本身，这就是为什么第一个元素选择器是必需的。

＆＃13;

.col-md-auto:first-child:nth-last-child(3),
.col-md-auto:first-child:nth-last-child(3)~.col-md-auto {
  width: 33.3333%;
}

.row {
  margin: 1em 0;
}

.row::after {
  display: table;
  content: " ";
  clear: both;
}

.col-md-auto {
  background-color: dodgerblue;
  height: 5em;
  float: left;
  width: 100%;
}

.col-md-auto:nth-child(even) {
  background-color: violet;
}

＆＃13;

<div class="row">
  <div class="col-md-auto"></div>
  <div class="col-md-auto"></div>
  <div class="col-md-auto"></div>
</div>

<div class="row">
  <div class="col-md-auto"></div>
  <div class="col-md-auto"></div>
  <div class="col-md-auto"></div>
  <div class="col-md-auto"></div>
</div>

＆＃13;

Answer 2

您可以使用nth test tool。还有两个很棒的初学者网站

Css Reference

Html Reference

有人可以解释这个复杂的css做了什么

2 个答案: