html - 为什么css中一个td标签的类里面有括号？

Question

我正在查看一些 html，我发现了这段代码:

@media only screen and (max-width:540px) {
        td[class="spechide"] {
            display: none !important;
        }
}

我能够理解第一行使 css 特定于最大宽度为 540 像素的屏幕尺寸，但我用谷歌搜索并找不到为什么你需要 class="MainContainer"括号内的。在 html 中，类照常指定:<td class="spechide" .

如有任何帮助或指导，我们将不胜感激。 :)

Answer 1

中括号是attribute selectors .所以在这种情况下，如果 class 它将应用 CSS属性包含值 "spechide" .在您的示例中，使用 td.spechide 是一样的, 但不同之处在于，如果该类包含多个类(如 <td class="spechide another-class"> )，它将不会应用于 td.spechide 的位置会是:

td[class="spechide"] {
  background-color: red;
}

td.spechide {
  font-weight: bold;
}

<table>
  <tr>
    <td>
      Test 1
    </td>
    <td class="spechide">
      Test 2
    </td>
    <td class="spechide another-class">
      Test 3
    </td>
  </tr>
</table>

但完全有可能有人根本没有想到使用 .class选择器。