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

<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>

有没有副作用或者有没有更好的方法?


当前回答

你可以使用一个没有样式的类,这是完全有效的HTML。

CSS文件中引用的类并不是类的定义,它是用于样式化目的的选择器规则。

其他回答

如果你在HTML元素上应用了一个类,并且这个类没有在CSS中定义,那么它就没有效果。这是一种常见的做法,就像Aamir afridi说的,如果你只是为了js的目的而使用类,用js-作为前缀是一个很好的做法。

它不仅对类有效,而且对html元素的id属性也有效。

根据HTML5规范:

类属性的值必须是由空格分隔的集合 表示元素所属的各种类的标记。 ... 对于作者可以在其中使用的令牌没有其他限制 类属性,但鼓励作者使用 描述内容的本质,而不是描述的价值 内容的理想表示形式。

此外,在版本4中:

class属性在HTML中有几个角色: 作为样式表选择器(当作者希望分配样式时) 一组元素的信息)。 用于一般用途的加工 用户代理。

您的用例属于第二种场景,这使得它成为使用类属性的合法示例。

正如很多人提到的,是的,使用没有指定CSS的类是完全有效的,而不是把它们看作“CSS类”,你应该简单地认识到类和ID的语义分别是组和单独的元素。

我想插一句,因为我觉得在这个例子中,一个重要的点没有被提出。如果你曾经需要对可变长度的元素进行可视化操作(在这种情况下,你使用的是表行),那么认识到通过Javascript这样做的成本可能非常昂贵总是有意义的(例如,如果你有数千行)。

在这种情况下,假设我们知道列2总是有可能被隐藏(这是表的一个有意识的函数),那么设计一个CSS样式来处理这个用例是有意义的。

table.target-hidden .target { display: none; }

然后不是使用JS遍历DOM找到N个元素,我们只需要在一个(我们的表)上切换一个类。

$("table").addClass("target-hidden")

通过给表分配一个ID,这将更快,你甚至可以通过使用:n -child选择器引用列,这将进一步减少你的标记,但我不能评论效率。这样做的另一个原因是我讨厌内联样式,并将竭尽全力根除它!

你可以使用一个没有样式的类,这是完全有效的HTML。

CSS文件中引用的类并不是类的定义,它是用于样式化目的的选择器规则。

“CSS类”是一个用词不当;class是分配给HTML元素的属性(从脚本的角度来说,是属性)。换句话说,您在HTML中声明类,而不是在CSS中声明类,因此在您的情况下,“目标”类实际上存在于那些特定的元素上,并且您的标记是完全有效的。

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

一旦您理解了这一点,就可以清楚地看到在样式表中不定义.target规则不会产生任何副作用当您将类分配给元素时,您可以通过样式表或脚本中的类引用这些元素。双方都不依赖对方。相反,它们都引用标记(或者更准确地说,它的DOM表示)。即使使用JavaScript来应用样式,这个原则也适用,就像在jQuery一行程序中所做的那样。

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


1这也是为什么CSS ID选择器匹配所有给定ID的元素,而不管ID是只出现一次,还是多次出现(导致HTML文档不符合要求)。

我所知道的唯一一种情况是,当一些浏览器因为bug而拒绝正确应用某些其他规则时,这样的空CSS规则是必要的;创建空规则将导致出于某种原因应用其他规则。有关此类错误的示例,请参见下面的回答。然而,这是在CSS方面,因此应该与标记无关。