Question

EDITED

td.number:nth-of-type(odd) {
    background-color: blue;
  }

为什么它不能在SCSS中运行？

这里工作得很好：

  &:nth-of-type(odd) {
    font-weight: bold;
  }

区别是什么？我该怎么用？

Answer 1

你做错了。就像你告诉每个td在一个tr中有类号，所以没有奇数td与类号。所以在tr中只有td的类号。

因此您必须选择奇数类型的每个tr，然后在奇数tr

中更改td的颜色

table {
  width: 800px;
  display: flex;
  flex-direction: column;
  tr {
    display: flex;
    width: 800px;
    th {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 56px;
      width: 100%;
      background: #E5EEFB;
      box-shadow: inset 0 1px 3px 0 #FFFFFF;
      border: 1px solid #DAE0E9;
      font-weight: bold;
      font-size: 14px;
      color: #3A5071;
      letter-spacing: 0.66px;
      text-align: center;
      &:first-child {
        border-top-left-radius: 5px;
      }
      &:last-child {
        border-top-right-radius: 5px;
      }
    }
    td {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 56px;
      width: 100%;
      background: #FFFFFF;
      border: 1px solid #DAE0E9;
      font-size: 16px;
      color: #577198;
      letter-spacing: 0.75px;
      text-align: center;
      &:nth-of-type(odd) {
        font-weight: bold;
      }
    }
    &:nth-of-type(odd) .number {
        background-color: blue;
      }
  }
}

编写此代码。它会帮助你

nth-of-type（odd）不工作SCSS

1 个答案: