Question

这仅仅是一个关于良好实践的概念性问题。

问题很简单。有没有＆＃34;正确＆＃34;如何订购jQuery / CSS选择器的部分？例如，假设我有一个具有以下属性的元素：

<div class="red green blue" id="someDiv" anAttr="something">

为了更好的衡量标准，让它在徘徊时也会瞄准它。

以下选择器之间有什么区别吗？：

div.red.green.blue#someDiv[anAttr='something']:hover
div#someDiv.red.green.blue[anAttr='something']:hover
div.red#someDiv[anAttr='something']:hover.blue.green
div[anAttr='something'].blue:hover#someDiv.red.green

意思是，目标的顺序是否重要，真的吗？或者我可以把它们放在任何我想要的顺序中吗？

根据这个JSFiddle，它们在技术上都有效。

Answer 1

5.2选择器语法

简单的选择器是类型选择器或通用选择器   紧接着是零个或多个属性选择器ID   选择器或伪类，以任何顺序。简单的选择器   匹配，如果它的所有组件都匹配。

注意：CSS 2.1中使用的术语与实际不同   用于CSS3。例如，一个简单的选择器＆＃34;指的是较小的   CSS3中的选择器的一部分比CSS 2.1中的选择器的一部分。请参阅CSS3选择器   模块[CSS3SEL]。

选择器是由一个或多个简单选择器组成的链   组合子。组合器是：空格，＆＃34;＆gt;＆＃34;和＆＃34; +＆＃34;。白色空间   可能出现在组合器和它周围的简单选择器之间。

调用与选择器匹配的文档树的元素   选择者的主题。选择器由单个简单组成   selector匹配满足其要求的任何元素。前置一个   简单的选择器和链的组合器强加额外的匹配   约束，所以选择器的主体总是一个子集   与最后一个简单选择器匹配的元素。

一个伪元素可以附加到a中的最后一个简单选择器   链，在这种情况下，样式信息适用于子部分   每个科目。

来自：w3.org

Answer 2

排序可以改变jQuery选择器的速度。我为它做了一个jsPerf test，事实证明只使用ID是最快的（并不奇怪），并且首先使用属性选择器是最慢的，稍微一点。其他的非常相似。

请注意，我必须删除jQuery的:hover选择器，因为这纯粹是一个CSS事物AFAIK。

Answer 3

请注意，正如emmanuel的答案所述，CSS2.1与the current level 3 standard有轻微的术语差异，所以我认为CSS2.1定义已经过时了。语法仍然几乎相同，但术语更明确：一个简单的选择器现在总是指每个现在称为简单选择器序列的任何一个组件，或者更好的是，复合选择器

以下是3级标准中的相同引用，仅包含相关位：

4。选择器语法

序列的简单选择器是一组简单的选择器，它们没有被组合子分开。它始终以类型选择器或通用选择器开头。序列中不允许使用其他类型选择器或通用选择器。

简单选择器是类型选择器，通用选择器，属性选择器，类选择器，ID选择器或伪类。

与CSS2.1不同，此规范并未明确使用“以任何顺序”这一短语，但它很容易暗示它只是声明了类型/通用选择器的异常。据我所知，这种异常的唯一原因是类型选择器没有任何特殊符号，这使得它无法与另一个简单的选择器区分，它是否发生在复合选择器中的任何其他地方。一个通用选择器，尽管用星号表示，实际上只是意味着“任何类型的元素” - 一个通配符类型选择器，如果你愿意，所以它遵循类型选择器的相同规则。

同时查看the upcoming standard，它会看到更重要的更改（并定义术语“复合选择器”）。

我要补充一些注意事项：

现在大家都知道，大多数浏览器使用的本机选择器引擎会评估right-to-left order中的选择器。有一种误解，认为这适用于简单的选择器级别; 它没有。不严格，无论如何。有许多优化可以解释一些常见情况，例如ID选择器的存在，类选择器的存在，动态伪类的存在等等。无论它们在复合选择器中的位置如何，这些优化几乎总是发生。在他们正确的头脑中，没有人会首先查看最右边的简单选择器，当它确实是最重要的类型或ID选择器时，尤其是当您考虑到大多数作者将ID放在靠近开头的位置时，类型选择器只能出现在开头。

我在回答this question关于选择器引擎的简单选择器排序问题的答案中，通过示例进一步详细介绍。
暗示jQuery的选择器引擎Sizzle遵循相同的规则，但请记住，就像布局引擎中内置的那样，这只是标准的一个实现。实现的整个性质是每个人都做了类似的事情，而其他人则完全不同，因此性能无法在极其精细的层面上进行限定。

然而，几乎常见的是，序列中的简单选择器越少，选择器引擎在评估选择器时必须做的工作就越少。你应该只根据需要具体，而且不能超过你。例如，您可以使用类选择器或伪类来限制ID选择器的上下文，但您几乎不需要超越它。

众所周知，jQuery分别将单独的ID选择器，类选择器和类型选择器优化为document.getElementById()，document.getElementsByClassName()和document.getElementsByTagName()。您可以使用任何其他选择器限定它们，它仍然有效，但您将失去这些优化路径作为权衡。在原生选择器引擎中存在类似的优化，但就相似性而言，无论如何都要与作者相关。
说到jQuery，因为您的问题都标记为jquery-selectors css-selectors，请注意jQuery不支持某些动态伪类，例如:hover。但基本原则仍然是相同的。（正如评论中所提到的，如果传递给:hover，可以检测当前document.querySelectorAll()的元素，但由于显而易见的原因，这几乎从不是有用的。）

因此，简而言之：在订购简单的选择器时，不要担心性能。任何性能偏差通常都是无关紧要的，只有最明显的例外情况。除了上面提到的限制之外，语法不会施加任何其他限制。您所要做的就是避免资格过高，并保持一致。

例如，这是我如何订购我的简单选择器 - 语法允许我选择我喜欢的任何订单，这正是我认为合适的：

a#id[attr=val].class1.class2:nth-child(n):link:hover

Answer 4

您放置它们的顺序无关紧要。重要的是你的CSS课程的内容。

您需要确保其中一个css类没有设置一个可以覆盖另一个css类样式的属性。

在下面的示例中，绿色类将覆盖红色类，使div的文本颜色为绿色。

示例CSS：

 .red{

   /* set text color to red */
   color:red;

 }

 .green{

  /* set text color to red */
  color:green;

 }

在序列中排序简单的选择器

这仅仅是一个关于良好实践的概念性问题。

4 个答案:

4。选择器语法