html - 申请第 n 个 child 不起作用

Question

为什么 nth-child(n) 在这里不起作用？可以在 HTML 中添加更多子项，但我认为使用 nth-of-type(1), nth-of-type 添加相同规则(相同代码)不是一个好方法(2)......, CSS 中的 nth-of-type(10)。所有子项都包含相同的规则，那么为什么不在一个选择器中提及这些规则，而不是多次添加相同的规则呢？

我变了

nth-of-type(1), nth-of-type(2)...... , nth-of-type(10)

到

第 n 个 child (n)

在下面的示例中，如果我将一个规则与 nth-child(n) 一起使用，则选项卡内容将变得困惑，选项卡不起作用:

.col100{
  width:100%;
}
.left{
  float:left;
}
.tab-wrap {
  transition: 0.3s box-shadow ease;
  border-radius: 6px;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  list-style: none;
  background-color: #fff;
  margin: 40px 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
  .tab-wrap:hover {
    box-shadow: 0 12px 23px rgba(0, 0, 0, 0.23), 0 10px 10px rgba(0, 0, 0, 0.19); }

.tab {
  display: none; }

/*child can be more than 10, but code and rule is same.*/

  .tab:checked:nth-of-type(1) ~ article .tab_content:nth-of-type(1) {
    opacity: 1;
    transition: 0.5s opacity ease-in, 0.8s transform ease;
    position: relative;
    top: 0;
    z-index: 100;
    transform: translateY(0px);
    text-shadow: 0 0 0; }

/*child can be more than 10, but code and the rule is same.*/

  .tab:checked:nth-of-type(2) ~ article .tab_content:nth-of-type(2) {
    opacity: 1;
    transition: 0.5s opacity ease-in, 0.8s transform ease;
    position: relative;
    top: 0;
    z-index: 100;
    transform: translateY(0px);
    text-shadow: 0 0 0; }

/*child can be more than 10, but code and rule is same.*/

  .tab:checked:nth-of-type(3) ~ article .tab_content:nth-of-type(3) {
    opacity: 1;
    transition: 0.5s opacity ease-in, 0.8s transform ease;
    position: relative;
    top: 0;
    z-index: 100;
    transform: translateY(0px);
    text-shadow: 0 0 0; }

.tab:first-of-type:not(:last-of-type) + label {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0; }
  .tab:not(:first-of-type):not(:last-of-type) + label {
    border-radius: 0; }
  .tab:last-of-type:not(:first-of-type) + label {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0; }
  .tab:checked + label {
    background-color: #fff;
    box-shadow: 0 -1px 0 #fff inset;
    cursor: default; }
    .tab:checked + label:hover {
      box-shadow: 0 -1px 0 #fff inset;
      background-color: #fff; }
  .tab + label {
    box-shadow: 0 -1px 0 #eee inset;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    display: block;
    text-decoration: none;
    color: #333;
    flex-grow: 3;
    text-align: center;
    background-color: #f2f2f2;
    user-select: none;
    text-align: center;
    transition: 0.3s background-color ease, 0.3s box-shadow ease;
    height: 50px;
    box-sizing: border-box;
    padding: 15px; }
    .tab + label:hover {
      background-color: #f9f9f9;
      box-shadow: 0 1px 0 #f4f4f4 inset; }
  .tab_content {
    padding: 10px 25px;
    background-color: transparent;
    position: absolute;
    width: 97%;
    z-index: -1;
    opacity: 0;
    left: 0;
    transform: translateY(-3px);
    border-radius: 6px; }

<div class="clearfix"></div>


<div class="tab-wrap">
  <input type="radio" id="tab1" name="tabGroup1" class="tab" checked>
  <label for="tab1"><span class="font16">Menu</span></label>

  <input type="radio" id="tab2" name="tabGroup1" class="tab">
  <label for="tab2"><span class="font16">Sub-Menu</span></label>
  
  <input type="radio" id="tab3" name="tabGroup1" class="tab">
  <label for="tab3"><span class="font16">Sub-Menu-Sub</span></label>
  
  <article class="left col100">
    <div class="tab_content">
      <article>Text 1</article>
    </div>
    <div class="tab_content">
      <article>Text 2</article>
    </div>
    <div class="tab_content">
      <article>Text 3</article>
    </div>
  </article>
</div>

Answer 1

好的，nth-child(n) 无法工作，(语法正确的 nth-child(1n+0) 和 nth-of-输入(1n+0))。 (An+B) 的意思是“每第 n 个兄弟”，但是您的代码试图将第一个同类 input.tab 与第一个同类 div.tab_content exactly 或 2nd input.tab 到 2nd div.tab_content exactly 等等 - 它不是任何对任何如果您使用 An+B 就是这种情况(后一种语法选择多个 sibling ，而不是一个 - 表达式在您的选择器中出现两次的事实并不意味着它仅适用于 n 在两种情况下都是一样的)。

我没有看到您尝试做的事情的“干净”解决方案。您可能需要完全重新考虑该策略并使用不同的文档结构来仅通过一个选择器来获得您想要的内容，但是如果您将一个规则与多个逗号分隔的选择器一起使用，仍然可以进行显着的简化，如下所示:

.tab:checked:nth-of-type(1) ~ article .tab_content:nth-of-type(1),
.tab:checked:nth-of-type(2) ~ article .tab_content:nth-of-type(2),
.tab:checked:nth-of-type(3) ~ article .tab_content:nth-of-type(3)  {
    opacity: 1;
    transition: 0.5s opacity ease-in, 0.8s transform ease;
    position: relative;
    top: 0;
    z-index: 100;
    transform: translateY(0px);
    text-shadow: 0 0 0; }