Question

我正在查看一些html，并且遇到了以下代码：

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

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

感谢您的帮助或指导。：）

Answer 1

括号为attribute selectors。因此，在这种情况下，如果class属性包含值"spechide"，它将应用CSS。在您的示例中，使用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选择器。

Answer 2

您可以使用方括号来定位HTML标记的任何属性。例如...您可能有一个如下所示的HTML图像标签：

<img src="./image.jpg" alt="Image alt" />

在CSS中，您可以使用以下CSS语法定位此图片：

img[alt="Image alt"] {
    display: none;
}

因此，在您的示例中，它们奇怪地通过使用[]方括号来定位class属性。这是完全有效的，但是在定位class属性时，看到它写成这样的情况更为常见：

@media only screen and (max-width:540px) {
        td.spechide {
            display: none !important;
        }
}

基本上，这将与您在示例中给出的相同。

Answer 3

方括号通常在CSS中用作属性选择器，它使您可以为其属性设置html元素的样式。

例如：

[data-vegetable="liquid"] { color: blue }

<td data-vegetable="liquid">Water</td>
<td data-vegetable="liquid">Wine</td>
<td data-vegetable="no">Meat</td>

此示例将使带有data-vegetable="liquid"的元素具有蓝色的文本。提到方括号的上下文是非标准的，因为在类名-.spechide之前使用带点的传统类选择器会更有意义。

您可以在MDN Website和attribute selectors上找到有关CSS选择器的更多信息。

为什么在CSS的td标签类中有方括号？

3 个答案: