【问题标题】：Tag name in CSS selector (e.g. div#id): how is it read? (Left to right or right to left?) [duplicate]CSS 选择器中的标签名称（例如 div#id）：它是如何读取的？（从左到右还是从右到左？）[重复]
【发布时间】：2015-02-03 17:58:15
【问题描述】：

所以我偶然发现了几篇关于 CSS 优化的文章：

显然 CSS 是从右到左读取的。这意味着div table a 的读法如下：首先检索页面上的所有a 元素，然后检索所有包含a 的table 元素（对吗？），然后是所有div 元素，其中两者都在他们（对吧？）。

我在任何地方都找不到答案的问题是：如何解析像 div#div_id 这样的 CSS 规则？首先解析所有id为“div_id”的元素，然后应用过滤器从那一堆#div_id元素中获取所有div元素？还是首先解析所有 div 元素，然后应用过滤器来获取 id 为“div_id”的所有内容？

我提到的第一篇文章说CSS中推荐的效率顺序是：#id > > .class > tag > rest。但是tag#id呢？

澄清一下：我喜欢输入div#div_id，只是为了让我自己清楚#div_id 适用于div 元素，而无需查找HTML 来找出哪个元素的样式我正在查看，但如果这会花费我很多网站的性能，我不想那样使用它。那么推荐的编写规则的方式是什么？我应该在我的选择器中删除标签吗？真的那么贵吗？

答案

答案将是，正如 jbutler483 所说：留下标签名称会更快。如果您想澄清您正在设计的元素，请不要使用div#my_id，而是使用#div_my_id。如果您不太关心性能，您仍然可以使用div#my_id，但它会慢一些（但您可以问问自己它是否真的会对您的应用程序产生那么大的影响）。

【问题讨论】：

tag#id 的意义何在？您是否在多个页面上有具有相同 id 和不同标签的元素？ id 必须是唯一的，因此您永远不能在同一页面上拥有两个具有相同 id 和不同标签的元素。
嗯，是的，有时我会这样做。假设我有一个 p.bold 和一个 span.bold，我希望它们的行为不同。（好吧，这不是 ID，但问题还是一样。）
我知道这对类是有意义的。我特意问你为什么要使用 ID，因为 ID 必须是唯一的。

标签： performance css css-selectors

【解决方案1】：

好吧，我想你有点糊涂了。

在您的示例中，您使用：

div table a

所以我会使用它。

差不多，在你的 html 中可能看起来像这样

<div>
 <table>
    <a>
      //styling applied here
    </a>
 </table>
</div>

或其他类似的东西

<div>
  <div></div>
  <table>  
     <tr>
       <th>hi there</th>
       <th>
          <a>i'm an a tag!</a>

所以，看看那个：

div table a

将会

div table a

 ^    ^   ^
 |    |   |
 |    |    a child
 |    |
 |   parent
 |
grandparent

这意味着您将为作为表格的子/后代的任何“a”元素设置样式，而表格又是 div 元素的后代

所以，在你的另一个例子中：

div#div_id

您将设置所有 div_id 的 id 的样式，其中有一个 div 作为父级。

顺便说一句，看看你的例子，我想指出（以防你不知道）：

id 属性应该是唯一的
<a> 属性不应直接在 <table> 元素中使用（而应将其嵌套在 th 或 td 标记中）
如果您希望设置多个元素（不同类型）的样式，则创建一个类并使用它会更有效

澄清后回答：

你的

 div#div_id

在 HTML 中，由于 id 意味着是唯一的，它会查找具有指定 id 的“所有 id”。

它会然后检查它是否是一个 div 元素。

这似乎是一个不好的例子，因为显然某些（较旧的）浏览器只会查找第一个 id，并返回它，而不是检查整个网页是否有任何“重复”的 id。

由于您的 id 是唯一的，您可以删除您的标签，因为它会变得多余/没有用处

总结

那么，在 cmets 中这个扩展对话的一个例子：

如果我想为单个 div 设置样式（并且仍然知道它是我要添加样式的 div），我会使用以下命名约定：

<div id="my-div-to-style">
             ^
             |

[这里的'div'这个词可以是任何东西]

在我的 css 中我会写：

       _  this word must match the
      /   id i used above
     |
#my-div-to-style{
//styling...
}

如果我想将相同的样式添加到多个 div 元素（具有将其添加到其他元素的范围），我会改为使用 class：

<div class="myDivStyle">

然后使用：

.myDivStyle{
 //styling...
}

在最后一个示例中，我不会仅限于设置 div 的样式，因此我不会将其包含在我的命名中：

<div class="myStyle">
<a class="myStyle">
<table class="myStyle">



.myStyle{
//styling for any element I want
}

【讨论】：

div table a 可以引用表格内的任何<a>，您会将其与div table > a 混淆
我会澄清我的帖子，但我是指出以防 OP 不知道
我认为问题作者知道他们在选择什么，他们的问题是浏览器如何查找 CSS 选择的元素，是否选择所有 a 标签并检查 dom 树还是从div 标签向下检查？
我确实知道，但还是谢谢:)。
@minitauros 请查看编辑

【解决方案2】：

您可以在此处了解有关您的问题的更多信息：css-tricks => efficiently rendering html

有四种键选择器：ID、类、标签和通用。它们的效率也是如此。

#main-navigation {   }      /* ID (Fastest) */
body.home #page-wrap {   }  /* ID */
.main-navigation {   }      /* Class */
ul li a.current {   }       /* Class *
ul {   }                    /* Tag */
ul li a {  }                /* Tag */
* {   }                     /* Universal (Slowest) */
#content [title='home']     /* Universal */

当我们结合这个从右到左的想法和键选择器的想法时，我们可以看到这个选择器不是很有效：

#main-nav > li {   }  /* Slower than it might seem */

尽管这感觉有点反直觉......由于 ID 非常高效，我们会认为浏览器可以快速找到该 ID，然后快速找到 li 孩子。但实际上，相对较慢的 li 标签选择器会先运行。

【讨论】：

【解决方案3】：

tag#id 呢？您提到的second link 包含答案。

不要使用标签名称或类来限定 ID 规则

如果一个规则有一个 ID 选择器作为它的键选择器，不要添加标签为规则命名。由于 ID 是唯一的，因此添加标签名称会变慢不必要地降低匹配过程。

不要用标签名限定类规则

前面的概念在这里也适用。虽然可以使用类很多时候在同一个页面上，它们仍然比标签更独特。

【讨论】：

我喜欢键入 div#div_id 只是为了让自己清楚 #div_id 适用于 div 元素，而无需查找 HTML 以找出我正在查看的元素的样式，但是如果它花费了我很多网站的性能，我不想那样使用它。那么，推荐的编写规则的方式是什么？我应该在我的选择器中删除标签吗？真的那么贵吗？
@minitauros CSS 查询的编写方式一般不会对性能产生重大影响，而且浏览器也在不断改进，所以我想说清晰、一致的编码风格是第一位的。

【解决方案4】：

正如你所说，规则是从右到左解析的，这里也一样。

虽然重复的id 值无效，但由浏览器决定是否接受和解析它们，例如下面（在 Chrome 中）呈现第一个和最后一个元素带有红色文字。

Demo Fiddle

div#test {
    color:red;
}

<div id='test'>text</div>
<span id='test'>
    text
</span>
<div id='test'>text</div>

在现代浏览器中，您可能希望减少对选择器解析性能的关注，而是希望获得符合最佳实践的有效 CSS，使选择器尽可能简短。

【讨论】：