問題描述
ul>有什么區(qū)別?李>CSS 中的 {...}和ul li a {...}?- 哪個(gè)效率更高，為什么?
推薦答案
">" 是 子選擇器
"" 是 后代選擇器
區(qū)別在于后代可以是元素的子元素，也可以是元素的子元素的子元素，也可以是子元素的子元素的子元素ad inifinitum.
The difference is that a descendant can be a child of the element, or a child of a child of the element or a child of a child of a child ad inifinitum.
子元素只是直接包含在父元素中的元素:
A child element is simply one that is directly contained within the parent element:
<foo> <!-- parent -->
<bar> <!-- child of foo, descendant of foo -->
<baz> <!-- descendant of foo -->
</baz>
</bar>
</foo>
對于這個(gè)例子，foo * 將匹配 <bar> 和 <baz>，而 foo >* 只會匹配 <bar>.
for this example, foo * would match <bar> and <baz>, whereas foo > * would only match <bar>.
關(guān)于你的第二個(gè)問題:
哪個(gè)更高效，為什么?
我實(shí)際上不會回答這個(gè)問題，因?yàn)樗c開發(fā)完全無關(guān).CSS 渲染引擎的速度如此之快，幾乎沒有* 優(yōu)化 CSS 選擇器的理由，只需要使它們盡可能短.
I'm not actually going to answer this question as it's completely irrelevant to development. CSS rendering engines are so fast that there is almost never* a reason to optimize CSS selectors beyond making them as short as possible.
與其擔(dān)心微優(yōu)化，不如專注于編寫對當(dāng)前案例有意義的選擇器.在為嵌套列表設(shè)置樣式時(shí)，我經(jīng)常使用 > 選擇器，因?yàn)閰^(qū)分正在設(shè)置樣式的列表級別很重要.
Instead of worrying about micro-optimizations, focus on writing selectors that make sense for the case at hand. I often use > selectors when styling nested lists, because it's important to distinguish which level of the list is being styled.
* 如果在渲染頁面時(shí)確實(shí)是一個(gè)問題，那么你可能在頁面上有太多元素，或者 CSS 太多.然后你必須運(yùn)行一些測試來看看實(shí)際的問題是什么.
這篇關(guān)于CSS 選擇器 ul li a {...} vs ul >李>一個(gè) {...}的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！