我可以使用非现有的CSS类吗？ [英] Can I use non existing CSS classes?

问题描述

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

有什么副作用或有更好的方法吗？

解决方案

CSS类是一个不正确的名词; class 是您分配给HTML元素的属性（或在脚本方面的属性）。换句话说，你用HTML而不是CSS来声明类，所以在你的情况下，target类 实际上存在于这些特定的元素上，你的标记是完全有效的。 p>

这并不一定意味着您需要在HTML中声明一个类，然后才能在CSS中使用它。看到ruakh的评论。选择器是否有效完全依赖于选择器语法，CSS具有自己的一组处理解析错误的规则，这些规则都不涉及标记。基本上，这意味着HTML和CSS在有效性方面完全彼此独立。 （这也是为什么CSS ID选择器匹配给定的 id 属性的任何元素，而不管ID是否被确定为唯一的，因此HTML是否符合） / p>

一旦你明白，很明显没有定义 .target 规则的副作用 ¹ 将类分配给元素时，您可以在脚本或样式表中同时使用这些类来引用这些元素。两者都没有对另一个的依赖。相反，它们都是指标记（更确切地说，是指代表它的DOM）。即使你使用JavaScript来应用样式，这个原则也适用，因为你在你的jQuery一行中。

当你写一个CSS规则和类选择器，你所说的是我想对具有这个类的元素应用样式。同样，当你编写一个脚本来通过某个类名检索元素时，你说的是我想用具有这个类的元素做事情。

---

¹ _{我知道的唯一情况是一个空CSS规则是必要的，当一些浏览器拒绝正确应用某些其他规则作为错误的结果;创建空规则将导致由于某种原因应用这些其他规则。请参见此答案这样的错误的例子。但是这是在CSS一侧，因此应该与标记无关。}

I have a table where I show/hide a full column by jQuery via a CSS class that doesn't exist:

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

With this DOM I can do this in one line via jQuery: $('.target').css('display','none');

This works perfectly, but is it valid to use CSS classes that aren't defined? Should I create an empty class for it?

<style>.target{}</style>

Are there any side effects or is there a better way to do this?

解决方案

"CSS class" is a misnomer; class is an attribute (or a property, in terms of scripting) that you assign to HTML elements. In other words, you declare classes in HTML, not CSS, so in your case the "target" class does in fact exist on those specific elements, and your markup is perfectly valid as it is.

This doesn't necessarily mean that you need to have a class declared in the HTML before you can use it in CSS either. See ruakh's comment. Whether or not a selector is valid depends entirely on the selector syntax, and CSS has its own set of rules for handling parsing errors, none of which concern the markup at all. Essentially, this means HTML and CSS are completely independent of each other in the validity aspect. (This is also why a CSS ID selector matches any element with the given id attribute regardless of whether the ID was determined to be unique and thus whether the HTML is conforming.)

Once you understand that, it becomes quite clear that there is no side effect of not defining a .target rule in your stylesheet.¹ When you assign classes to your elements, you can reference those elements by those classes either in a script, or a stylesheet, or both. Neither has a dependency on the other. Instead, they both refer to the markup (more precisely, on the DOM representing it). This principle applies even if you're using JavaScript to apply styles, as you're doing in your jQuery one-liner.

When you write a CSS rule with a class selector, all you're saying is "I want to apply styles to elements that have this class." Similarly, when you write a script to retrieve elements by a certain class name, you're saying "I want to do things with elements that have this class." Whether or not there are elements with the class in question is a separate issue altogether.

---

¹ _{The only situation I'm aware of where an empty CSS rule like that is necessary is when some browsers refuse to apply certain other rules properly as the result of a bug; creating an empty rule will cause those other rules to be applied for some reason. See this answer for an example of such a bug. However this is on the CSS side and therefore should have nothing to do with the markup.}

这篇关于我可以使用非现有的CSS类吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！