一尘不染

我可以使用不存在的CSS类吗?

html

我有一个表,其中通过不存在的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>

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


阅读 318

收藏
2020-05-10

共1个答案

一尘不染


CSS类”是用词不当;class是您分配给HTML元素的属性(或就脚本而言的属性)。换句话说,你在你的情况下,“目标”类HTML,CSS不申报类,所以
不会 在这些特定元素的事实存在,并且您的标记是完全有效的,因为它是。

这并不一定意味着您必须先在HTML中声明一个类,然后才能在CSS中使用它。请参阅ruakh的评论。选择器是否有效完全取决于选择器语法,并且CSS具有自己的规则来处理解析错误,这些规则都与标记无关。从本质上讲,这意味着HTML和CSS在有效性方面完全相互独立。1个

一旦了解了这一点,就很清楚.target在样式表中不定义规则没有副作用。2在为元素分配类时,可以在样式表或脚本中或在这两者中按这些类引用这些元素。两者都不依赖对方。相反,它们都引用标记(或更准确地说,是DOM表示)。即使您使用JavaScript来应用样式,这一原理也适用,就像在jQuery单行代码中所做的那样。

当您使用类选择器编写CSS规则时,您的意思是“我想将样式应用于属于该类的元素”。类似地,当您编写脚本以按某个类名检索元素时,您的意思是“我想使用属于该类的元素来做事”。是否存在
元素属于有问题的类是一个单独的问题完全。


1 这也是CSS ID选择器将 _所有_具有给定ID的元素匹配的原因,而无论ID是显示一次还是多次(导致不合格的HTML文档)。

2
我唯一知道的情况是,当某些浏览器由于错误而拒绝适当地应用某些其他规则时,需要使用空CSS规则。创建空规则将由于某些原因而应用其他规则。

2020-05-10