<div class="main">
<div class="category">
<div class="product">
</div>
</div>
</div>
我们希望通过CSS选择器访问.product：
> .product
> .main .category .product
> div.main div.category div.product
我将它们与以下标准进行比较：
>表现
>可维护性
>可读性
我们可以假设.product在整个页面中是唯一的.我们可以使用id而不是class,但在这种情况下,我们选择了class属性.
解决方法
We may assume that
.productis unique throughout the page.
性能方面最好的当然是ID选择器,但是因为你使用的是类,所以.product会排在第二位.
至于可维护性,可读性和语义(还有更多的性能)……
> .product意味着
Find any elements that have a class
product.
很容易理解,如果你基于上面的假设使用它,几乎与ID选择器相同.
我想在这种情况下使用类选择器和ID选择器之间的唯一区别是ID选择器强制执行此元素的唯一性,而不仅仅是因为恰好是一个这样的元素.换句话说,ID选择器的作用是知道文档只有一个这样的唯一元素,而类选择器则没有.
> .main .category .product表示
Find any elements that have a class
product
which are contained in any elements that have a classcategory
which are contained in any elements that have a classmain.
浏览器的任务是检查这些元素的祖先,如果你只有一个.product,这是多余的.许多浏览器布局引擎evaluate CSS selectors from right to left,类似于我如上所述将选择器翻译成英语.
> div.main div.category div.product表示
Find only
<div>elements that have a classproduct
which are contained in only<div>elements that have a classcategory
which are contained in only<div>elements that have a classmain.
此外,在检查元素的层次结构时,您希望浏览器仅将div与类产品匹配.如果要匹配此类的任何元素,则此选择器将无法按预期工作.
如果你确定你只有一个div与该类,并且你只想匹配该元素,那么你可以使用div.product代替,但.product仍然可以更好地执行.
