Question

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

我已经改变

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

到

nth-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-type(1n+0)也无效）。（An+B的意思是“每第n个兄弟姐妹”，但是您的代码试图将类型input.tab的第一个兄弟姐妹与类型div.tab_content的第一个兄弟姐妹完全匹配或将第二个{{1 }}精确到第二input.tab，依此类推-并非如此，就像您使用div.tab_content一样（后一种语法选择了多个同级，而不是一个-事实表达式在选择器中出现两次并不意味着仅当An+B两次出现时该表达式都适用。

对于您要执行的操作，我看不到任何“干净”的解决方案。您可能需要完全重新考虑该策略，并使用不同的文档结构仅通过一个选择器即可获得所需的内容，但是，如果您将一个规则与多个逗号分隔的选择器一起使用，则仍然可以进行大幅简化，例如：

应用nth-child无效

1 个答案: