澄清后回答：

Question

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

显然，CSS是从右到左阅读的。这意味着div table a的读取方式如下：首先检索页面上的所有a元素，然后检索其中包含a的所有table元素（对吗？），然后全部{{1}包含其中两个元素的元素（对吧？）。

我无法在任何地方找到答案的问题是：如何解析像div这样的CSS规则？首先要解析所有具有id“div_id”的元素，然后将其应用于从那堆#div_id元素中获取所有div#div_id个元素吗？或者首先解析所有div元素，然后应用过滤器来获取ID为“div_id”的所有内容？

我提到的第一篇文章说，CSS中推荐的效率顺序是：#id＆gt; ＆GT; .class＆gt;标签＆gt;休息。但是div呢？

澄清：我想输入tag#id只是为了让自己明白#div_id适用于div#div_id元素，而无需查找HTML来查找我正在看哪个元素的样式，但我不想这样使用它，如果它花了我很大的网站的性能。那么建议的规则是什么呢？我应该在选择器中删除标签吗？真的那么贵吗？

答案

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

Answer 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

这意味着您将成为任何一个＆＃39; a＆＃39;作为表的子/后代的元素，而后者又是div元素的后代

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

div#div_id

你将为div_id的所有id设置样式，其中div为父母。

BTW看你的例子，我想指出（如果你不知道）：

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

澄清后回答：

您

 div#div_id

在HTML中，由于ID 意味着是唯一的，因此它会查找所有ID＆＃39;具有指定的ID。

然后检查它是否是div元素。

这似乎是一个不好的例子，因为显然一些（较旧的）浏览器只会查找第一个ID，并返回它而不是检查整个网页是否有任何重复的内容。 ID＆＃39; S

如果您的ID是唯一的，那么您可以删除标记，因为它会留下多余/无用

摘要

所以，评论中这个扩展对话的一个例子是：

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

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

[单词＆＃39; div＆＃39;这里可能是任何东西]

在我的 css 中我会写：

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

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

<div class="myDivStyle">

然后使用：

.myDivStyle{
 //styling...
}

在最后一个例子中，我不会仅限于设计div，所以我不会在命名中包含这个：

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



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

Answer 2

如你所说，规则是从右到左解析的，这同样适用于此。

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

Demo Fiddle

＆＃13;

div#test {
    color:red;
}

＆＃13;

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

＆＃13;

在现代浏览器中，您可能不太注意选择器分辨率性能，而是希望获得符合最佳实践的有效CSS，使选择器尽可能简洁明了。

Answer 3

tag#id怎么样？你提到的second link包含答案。

不要使用标记名称或类
限定ID规则
如果规则有ID选择器作为其键选择器，请不要添加标记   该规则的名称。由于ID是唯一的，因此添加标记名称会变慢   不必要地进行匹配过程。

不要使用标记名称
限定类规则
之前的概念也适用于此。虽然可以使用类   多次在同一页面上，它们仍然比标签更独特。

Answer 4

您可以在此处详细了解您的问题：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标签选择器。

CSS选择器中的标记名称（例如div＃id）：如何读取？（从左到右或从右到左？）

答案

4 个答案:

澄清后回答：

摘要

Demo Fiddle

CSS选择器中的标记名称（例如div＃id）：如何读取？ （从左到右或从右到左？）

答案

4 个答案:

澄清后回答：

摘要

Demo Fiddle

CSS选择器中的标记名称（例如div＃id）：如何读取？（从左到右或从右到左？）