有人可以解释一下这个复杂的 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 并努力猜测它实际上是什么 does.I 我是一个新手所以发现处理这个复杂的东西很复杂 css.I 查看 w3 学校以弄清楚这些符号的含义我可以理解符号的含义但仍然无法弄清楚整个表达式是什么doing.Any建议将有很大帮助。

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

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

Answer 2

你可以玩 nth test tool。还有两个很棒的初学者网站

Css Reference

Html Reference

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

Can someone explain what this complex css does

css

css-selectors

css-float