如果這是我的html結(jié)構(gòu):

<tr class="editing">
   <td class="col-2"></td>
   <td class="col-2"></td>
</tr>

為什么這個嵌套的css工作得很好:

.editing {
    padding: 1em 1.5em;      
    .col-2 {
        font-size: 11em;
    }
}

但這并不:

.editing {
    padding: 1em 1.5em;      
    td {
        font-size: 11em;
    }
}

我用的是Chrome 114，根據(jù)https://caniuse.com/css-nesting的說法，它支持CSS嵌套。我知道如何使用非嵌套方法這是一個使用新支持的CSS特性的練習(xí)。

根據(jù)這篇文章:

HTML元素目前需要& amp前面的符號或用:包裝的符號是()。

...規(guī)格是:

嵌套樣式規(guī)則的選擇器不能以標(biāo)識符或函數(shù)符號開頭。

這意味著您需要將第二條規(guī)則重寫為:

.editing {
  padding: 1em 1.5em;

  :is(td) {
    font-size: 11em;
  }
}

...或者:

.editing {
  padding: 1em 1.5em;

  & td {
    font-size: 11em;
  }
}

并非所有瀏覽器都支持嵌套CSS選擇器。現(xiàn)在不建議這么做。

您應(yīng)該像這樣不嵌套地使用它們:

.editing {
  padding: 1em 1.5em;
}

.editing .col-2 {
  font-size: 11em;
}
/* or */
.editing td {
  font-size: 11em;
}