html - 我可以使用不存在的 CSS 类吗？

Question

我有一个表格，我通过一个不存在的 CSS 类通过 jQuery 显示/隐藏一个完整的列:

<table>
   <thead>
      <tr>
         <th></th>
         <th class="target"></th>
         <th></th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td></td>
         <td class="target"></td>
         <td></td>
      </tr>
      <tr>
         <td></td>
         <td class="target"></td>
         <td></td>
      </tr>
   </tbody>
</table>

有了这个 DOM，我可以通过 jQuery 在一行中做到这一点:$('.target').css('display','none');

这很好用，但是使用未定义的 CSS 类是否有效？我应该为它创建一个空类吗？

<style>.target{}</style>

是否有任何副作用或有更好的方法来做到这一点？

Answer 1

“CSS 类”用词不当； class 是您分配给 HTML 元素的属性(或就脚本而言的属性)。换句话说，您在 HTML 中声明类，而不是 CSS，因此在您的情况下，“目标”类 确实实际上存在于这些特定元素上，并且您的标记完全有效。

这并不一定意味着您需要在 HTML 中声明一个类，然后才能在 CSS 中使用它。见 ruak 的评论。选择器是否有效depends entirely on the selector syntax ，并且 CSS 有自己的一组 rules for handling parsing errors ，这些都与标记无关。本质上，这意味着 HTML 和 CSS 在有效性方面是完全独立的。¹

一旦你理解了这一点，你就会明白在你的样式表中不定义 .target 规则没有任何副作用。² 当你为你的元素分配类时，您可以通过这些类在样式表或脚本或两者中引用这些元素。两者都不依赖于另一个。相反，它们都引用标记(或者更准确地说，它的 DOM 表示)。即使您使用 JavaScript 来应用样式，这一原则也适用，就像您在 jQuery 单行器中所做的那样。

当您使用类选择器编写 CSS 规则时，您所说的只是“我想将样式应用于属于此类的元素”。类似地，当您编写脚本以通过某个类名检索元素时，您是在说“我想对属于该类的元素做一些事情”。是否有 元素属于所讨论的类完全是一个单独的问题。

---

¹ _{这也是为什么a CSS ID selector matches all elements with the given ID regardless ID 是只出现一次，还是出现多次(导致 HTML 文档不一致)。}

² _{我所知道的唯一需要像这样的空 CSS 规则的情况是某些浏览器由于错误而拒绝正确应用某些其他规则；创建空规则将导致由于某种原因应用这些其他规则。见 this answer有关此类错误的示例。然而，这是在 CSS 方面，因此应该与标记无关。}