为什么 css 不工作

Question

css ID 选择器不工作..我看不到错误的代码

当我不使用 id 选择器时，代码可以工作但不能使用 id 选择器。我将 id 与单个 qouta 和 double 一起使用，但仍然无法正常工作 css ID 选择器不工作..我看不到错误的代码

#ss {
  thead {
    display: block;
  }
  tbody {
    display: block;
    overflow: auto;
    height: 350px;
  }
  table {
    width: 10px;
  }
  th,
  td {
    border-bottom: 1px solid #ddd;
  }
  td {
    width: 60px;
  }
  th {
    background-color: #4CAF50;
    color: white;
  }
  tr:nth-child(even) {
    background-color: #f2f2f2
  }
  tr:hover {
    background-color: #ddd;
  }
}



<html>

<table id='ss'>
  <thead>
    <th>No</th>
    <th>Grup</th>
    <th>Barkod</th>
    <th>Urn_Adı</th>

  </thead>

  <tbody>
    <tr id='a1'>

      <td>1</td>
      <td id='a1_0'></td>
      <td id='a1_1'></td>
      <td id='a1_2'>NUANS</td>
      <td id='a1_3'>NUANS</td>

    <tr id='a2'>

      <td>2</td>
      <td id='a2_0'></td>
      <td id='a2_1'></td>
      <td id='a2_2'>SKEMER</td>
      <td id='a2_3'>WEMSEY</td>

    </tr>

  </tbody>

</table>
</html>

Answer 1

#ss {
  thead {
    display: block;
  }

您不能像普通 CSS 那样嵌套规则 – 这是只有一些 CSS 预处理器实现的语法。

Answer 2

你把所有的东西都搞砸了 css

执行以下操作CSS

#ss {}
  thead {
    display: block;
  }
  tbody {
    display: block;
    overflow: auto;
    height: 350px;
  }
  table {
    width: 10px;
  }
  th,
  td {
    border-bottom: 1px solid #ddd;
  }
  td {
    width: 60px;
  }
  th {
    background-color: #4CAF50;
    color: white;
  }
  tr:nth-child(even) {
    background-color: #f2f2f2
  }
  tr:hover {
    background-color: #ddd;
  }

你不能这样做（嵌套 CSS ）

#ss {
  thead {
    display: block;
  }

这是JSFiddle

#ss {}
  thead {
    display: block;
  }
  tbody {
    display: block;
    overflow: auto;
    height: 350px;
  }
  table {
    width: 10px;
  }
  th,
  td {
    border-bottom: 1px solid #ddd;
  }
  td {
    width: 60px;
  }
  th {
    background-color: #4CAF50;
    color: white;
  }
  tr:nth-child(even) {
    background-color: #f2f2f2
  }
  tr:hover {
    background-color: #ddd;
  }

<table id="ss">
  <thead>
    <th>No</th>
    <th>Grup</th>
    <th>Barkod</th>
    <th>Urn_Adı</th>

  </thead>

  <tbody>
    <tr id="a1">

      <td>1</td>
      <td id="a1_0"></td>
      <td id="a1_1"></td>
      <td id="a1_2">NUANS</td>
      <td id="a1_3">NUANS</td>

    <tr id="a2">

      <td>2</td>
      <td id="a2_0"></td>
      <td id="a2_1"></td>
      <td id="a2_2">SKEMER</td>
      <td id="a2_3">WEMSEY</td>

    </tr>

  </tbody>

</table>

Answer 3

你给了 SASS，正常 CSS 不能像那样使用嵌套选择器。

您需要使用编译器。例如：http://www.sassmeister.com/ (Online) or http://koala-app.com/（应用程序）

它将编译为：

#ss thead {
  display: block;
}
#ss tbody {
  display: block;
  overflow: auto;
  height: 350px;
}
#ss table {
  width: 10px;
}
#ss th,
#ss td {
  border-bottom: 1px solid #ddd;
}
#ss td {
  width: 60px;
}
#ss th {
  background-color: #4CAF50;
  color: white;
}
#ss tr:nth-child(even) {
  background-color: #f2f2f2;
}
#ss tr:hover {
  background-color: #ddd;
}

我刚刚从我链接的网站上提取了这个已编译的 CSS，因此它可能无法执行您希望它执行的操作，但这是您提供的。

查看您的 html，您的 SASS 应该是：

#ss {
  width: 10px;
  thead {
    display: block;
  }
  tbody {
    display: block;
    overflow: auto;
    height: 350px;
  }
  th,
  td {
    border-bottom: 1px solid #ddd;
  }
  td {
    width: 60px;
  }
  th {
    background-color: #4CAF50;
    color: white;
  }
  tr:nth-child(even) {
    background-color: #f2f2f2
  }
  tr:hover {
    background-color: #ddd;
  }
}

因为#ss 选择器是table。这将编译为：

#ss {
  width: 10px;
}
#ss thead {
  display: block;
}
#ss tbody {
  display: block;
  overflow: auto;
  height: 350px;
}
#ss th,
#ss td {
  border-bottom: 1px solid #ddd;
}
#ss td {
  width: 60px;
}
#ss th {
  background-color: #4CAF50;
  color: white;
}
#ss tr:nth-child(even) {
  background-color: #f2f2f2;
}
#ss tr:hover {
  background-color: #ddd;
}

Answer 4

不是 SASS...您不能在 CSS

中使用嵌套选择器

为什么 css 不工作

why css not working

html

css

selector