CSS 选择器中的标签名称（例如 div#id）：如何读取？（从左到右还是从右到左？）

Question

所以我看到了几篇关于 CSS 优化的文章：

• http://csswizardry.com/2011/09/writing-efficient-css-selectors/
• https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS

显然 CSS 是从右向左读取的。这意味着div table a读起来就像：首先a检索页面上的所有元素，然后table检索其中包含 a 的所有元素（对吗？），然后检索div包含这两个元素的所有元素（对吗？）。

我在任何地方都找不到答案的问题是：CSS 规则是如何div#div_id解析的？首先是否解析 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_idbut #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

这意味着您将设计作为表的子元素/后代的任何“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 是唯一的，您可以删除您的标签，因为它将变得多余/无用

概括

那么，评论中这个扩展对话的一个例子：

如果我想设置单个 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 元素（具有将其添加到其他元素的范围），我会使用一个类：

<div class="myDivStyle">

然后使用：

.myDivStyle{
 //styling...
}

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

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



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