我永远不确定选择元素的最佳(最有效)方法是什么。
假设我有以下布局(非常简单的示例)
<div id="navigation">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
- 我想选择我的无序列表(确保我不影响整个站点中的任何其他 UL),我应该执行
#navigation ul {}
还是为 UL 分配一个类?< - 我想选择我的列表项,再次确保我只影响那些。我应该执行
navigation ul li{}
还是分配一个类? - 最后,如果我想选择我的第一个链接并为其设置样式,我应该执行
#navigation ul li:first-child {}
还是分配一个类?
我明白这些问题几乎是一样的,但我很好奇什么时候应该使用类,什么时候不应该使用。
最佳答案
这里没有硬性规定。
一般的经验法则可能是当您想将某些元素组合在一起时使用类,对它们一视同仁,使用类是唯一的方法。
例如,在您的最后一个示例中,绝对不需要类(class)。
但是,使用示例 3 中的类会带来更好的性能,因为浏览器会更快地找到相关元素。与此相反的是代码易读性略有降低。 如果您在所有内容上都有类名,那么阅读其余标记会变得更加困难。
简而言之,在您上面显示的内容中,您所写的内容很好。
你应该阅读 this文章虽然涵盖了选择器的效率。
基本上效率的顺序是这样的:
ID, e.g. #header
Class, e.g. .promo
Type, e.g. div
Adjacent sibling, e.g. h2 + p
Child, e.g. li > ul
Descendant, e.g. ul a
Universal, i.e. *
Attribute, e.g. [type="text"]
Pseudo-classes/-elements, e.g. a:hover
类和 Id 之间的性能差异通常是无关紧要的。
不过,在列表中往下看,速度会大大降低。
这不是在任何地方添加类和 id 的论据 - 它只是让您判断性能和可维护性之间的权衡。
关于html - 我应该为所有内容添加一个类/id,还是使用其他选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11671153/