css - 有人可以解释一下这个复杂的 css 的作用吗

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 很复杂。我查看了 w3 学校来弄清楚是什么这些符号意味着我可以理解符号的含义，但仍然无法弄清楚整个表达式在做什么。任何建议都会有很大帮助。

Answer 1

If there are exactly 3 elements with a class="col-md-auto" which are siblings, style them each with 1/3 width of the parent container.

正在关注 4castle解释:

:nth-child()

The :nth-child(an+b) CSS pseudo-class matches an element that has an+b-1 siblings before it in the document tree, for a given positive or zero value for n. More simply stated, the selector matches a number of child elements whose numeric position in the series of siblings matches the pattern an+b.

nth-last-child()

The :nth-last-child(an+b) CSS pseudo-class matches an element that has an+b-1 siblings after it in the document tree, for a given positive or zero value for n.

General sibling selector ~

The ~ combinator separates two selectors and matches the second element only if it is preceded by the first, and both share a common parent.

---

.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 选择第一个 child 之后的元素，但不是第一个 child 本身，这就是为什么需要第一个选择器的原因。

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

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