评估CSS选择器LTR或RTL是否更容易/更快？

给定一个CSS选择器，如

ul > li a

从左到右或从右到左评估它是否更容易/更快？（我意识到“简单”和“更快”的答案可能不同……我想要两者的答案）。我即将踏上其中一条路，我不想走到一半，然后意识到我选择了错误的道路：）

LTR：迭代文档中的所有元素，选择

ul

，然后检查其所有子元素的

li

，然后查看其子元素的

a

RTL：迭代文档中的所有元素，找到所有

a

，过滤掉没有

li

祖先的元素，如果它确实有

li

祖先，检查它的父元素是否是

ul

，如果不是，删除

a

此外，除了迭代所有元素之外，没有其他方法可以做到这一点，是吗

---

---

我是在查找元素的上下文中思考的，就像jQuery一样，而不是在应用样式的上下文中思考的。

浏览器和Sizzle选择器JS引擎（在jQuery和其他框架中使用的）使用从右到左的匹配

在大多数情况下，从右到左是最理想的遍历解决方案

Sizzle优化以ID开头的选择器。它首先解析以ID开头的元素。然后将其用作进一步遍历的上下文

所以如果你有选择器

#myID > ul a

---

Sizzle将首先找到带有#myID的元素，假设在这种情况下，从左到右更为优化。

这是每个设计和编程论坛上重复的问题之一。一个常见的例子也是这条线上的原始海报所给出的例子：

李娜

如果您遍历ltr，您会找到所有uls，然后是这些uls的所有lis，然后是这些lis中的所有a标记。考虑这样一个事实，标记可能看起来像：

<ul>
    <li>
        <a href="#">Click Here</a>
    </li>
</ul>

<ul>
    <li>
        <span>
            <p>
                <div class="someuselessclass">
                    <span class="JunkClass">
                        <a href="#">Click Here</a>
                    </span>
                </div>
            </p>
        </span>
    </li>
</ul>

或者它可能看起来像：

<ul>
    <li>
        <a href="#">Click Here</a>
    </li>
</ul>

<ul>
    <li>
        <span>
            <p>
                <div class="someuselessclass">
                    <span class="JunkClass">
                        <a href="#">Click Here</a>
                    </span>
                </div>
            </p>
        </span>
    </li>
</ul>

事实上，你不知道遍历的深度有多深，在数千个这样的LIs中可能有数千个这样的链接。在我看来，根据经验，be的浏览器构建者已经得出结论，从右向左解析会更快

---

这是我的两分钱。

它只是一个普通的ol'CSS2选择器。没什么。只是说：P@BoltClock：呜呜。。。说得好。我计划支持CSS3，但我想这与这个具体问题无关。。如果它先找到#myID，那么它就混合了LTR和RTL，这就……令人困惑。我可以先将所有的#id加载到dict中，然后进行RTL解析，但是对于#id，我会跳过遍历并检查dict。真的吗？它经常出现吗？我想只有编写jQuery或布局引擎之类的库的人对此感兴趣。但无论如何。。。我想可能会有和ul一样多的a。但是让我们假设一下，ul和a的数量是相同的，如果没有祖先li，RTL必须一直检查到根，而从ul到LTR，它只需要检查几个级别就可以找到a或叶节点。哪一段距离更远。。。仍然不确定。但我猜你的意思是，LTR必须解析所有的ULs和LIs，即使它的末尾没有A，而RTL它只考虑我们知道有A的那些？但我认为这也是同样的问题…你在所有的As中循环，然后查找祖先LIs，可能有也可能没有父UL。我还忘了添加第三个代码示例，其中包含li中的数十个其他节点，这表明如果进行LTR遍历，则必须覆盖数千个节点，而不是RTLI，但最终使用RTL。。。。我想我觉得比较容易。