css选择器哪个最好,哪个CSS选择器更好的做法？

We may assume that .product is 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 class category

which are contained in any elements that have a class main.

浏览器的任务是检查这些元素的祖先,如果你只有一个.product,这是多余的.许多浏览器布局引擎evaluate CSS selectors from right to left,类似于我如上所述将选择器翻译成英语.

> div.main div.category div.product表示

Find only

elements that have a class product

which are contained in only

elements that have a class category

which are contained in only

elements that have a class main.

此外,在检查元素的层次结构时,您希望浏览器仅将div与类产品匹配.如果要匹配此类的任何元素,则此选择器将无法按预期工作.

如果你确定你只有一个div与该类,并且你只想匹配该元素,那么你可以使用div.product代替,但.product仍然可以更好地执行.