【本文译自 Zeldman (作为前端工程师,不要告诉我你不知道他是谁)在2012年11月写的《
IN DEFENSE OF DESCENDANT SELECTORS AND ID ELEMENTS》。】
除了偶尔更新下《Designing With Web Standards》,我这些年已经不再写关于CSS和HTML的具体实践和细节问题了。长江后浪推前浪——其他设计师和开发者接过了我的枪。在很大程度上,无论对他们还是对我们这个行业,这都是件好事。要说清楚代码那些事,最佳人选永远是那些每天花25小时沉浸其中的家伙——我也曾是如此。当像我这样的老家伙转向战略和管理角色(让我们有新的创新领域,也可以有新的写作主题),新一代代码高手也继续着发现和传播新知。这就是生命的神奇轮回吧。
不过在这诸多美好之中,我偶尔也会发现狗屎。有一种观念——如今甚至已固化成信条——即所谓
应该避免使用id——因为id“specificity【特化度】太高”——用class总是更可取。对这一信条,我必须称之为——胡扯。
据我所知,此观念来自于Nicole Sullivan著名的
面向对象的CSS。这种书写HTML和CSS的方法论被设计用于规模达数千页面的网站——且这多达数千页面的网站是由多达数十个前端工程师经过数年时间建造出来——且通常这建造过程缺乏统一准则或样式指导方针(或者等到有统一准则和样式指导方针之时已然太晚)。在这样的网站上——在像Amazon或Facebook这样从一开始就一锅乱炖的网站上——因为他们有一大帮厨子却没有一个主厨——在这样的网站上,使用id和后代选择器的组合确可能引发问题,特别是当笨拙的码农试图通过创建更specific【更特化】的后代选择器规则来覆盖基于id的后代选择器规则的时候。
在这样特定(而奇葩)的环境下,开发者们不断决斗般的把一条又一条css规则加入到巨大的一坨样式表里,这样式表更像考古遗迹,而非现代代码的好范例。面对如此一坨,Nicole告诫避免基于id的后代选择器或许是明智的。如果你倒了血霉要去弄一个庞大的、开发得一塌糊涂的网站,又不被允许按照常识和最佳实践重构模板和CSS,你可能不得不依靠class而弃用后代选择器和id。
但在几乎所有其他环境下,正确运用id和后代选择器更可取,因为这样更富语义,也更节约带宽。
我一直以来所主张的使用id的方式,其实就是HTML5新增元素的前身。2000年时,我们没有footer元素,为了给该div中的内容赋以结构上的意义,我们这样写:div id="footer"。今天,根据人们访问我们网站所用的浏览器和设备,我们可以选择用HTML5的footer元素替代老方式。但若是我们不能使用HTML5元素,使用id也没有什么不对的。
至于后代选择器,只要这个网站不是由100只猴子设计的,我们完全可以假设开发者能以协调的方式对具有id的div或者HTML5元素内的后代元素赋以样式,并且处于不同id的div或HTML元素中的相同元素可以被赋以不同样式。比如footer中的段落和列表项跟aside中的段落和列表项就可以被赋以不同样式。id(或HTML5元素)和后代选择器就是用来干这个的。给sidebar中的每个段落元素都设上classname不仅无谓浪费带宽,更是粗鲁之极。
跟我念:id没有任何问题,只要你正确运用(表达语义、表达结构、不滥用)。认为class总是比后代选择器和富有语义、表达结构的id更好,这种观念全然谬误。
请注意:我不是在贬低我的朋友Nicole Sullivan的面向对象的CSS对于那些一团乱麻的网站的作用,正如我不会贬低挖掘机对清理灾难现场的作用。我只是不想用挖掘机来清理我的房间。
【完】
分享到:
相关推荐
后代选择器和子选择器是CSS中的重要概念,它们用于指定样式的应用对象,但两者之间存在显著差异。后代选择器可以选取某个元素的所有后代元素,而子选择器仅选取直接子元素。下面详细介绍这两者之间的区别,包括用法...
串联选择器`#qq.a`只能选取同时具有"id=qq"和"class=a"的元素,而后代选择器`#qq .a`则会选择id为"qq"元素内的任何级别下class为"a"的元素,包括子元素、孙子元素等所有后代。 在实际应用中,根据需要选择合适的...
总的来说,理解和熟练使用CSS后代选择器是创建高效、可维护的CSS样式表的关键步骤之一。通过正确使用后代选择器,我们可以确保样式只作用于目标元素,避免样式冲突,同时提升代码的可读性和可维护性。
接下来是关系选择符,包括后代选择器、直接子元素选择器、相邻选择器、兄弟选择器和并列选择器。后代选择器(EF)用于选中某个元素(E)内部的所有指定元素(F),不论层级深浅。直接子元素选择器(E>F)则只选中...
串联选择器和后代选择器是CSS中的两种重要选择器,它们允许我们更加精确地定位和样式化页面元素。 **串联选择器(Adjacent Sibling Selector)** 串联选择器,也称为相邻兄弟选择器,用于选取紧接在另一个元素后的...
在提供的实例代码中,有一个关键性的代码片段:“$(".mydiv span")”,这个表达式中,“.mydiv”是祖先元素的选择器,而“span”是后代元素的选择器。当我们在jQuery中这样写时,表示我们要选中所有位于类名为...
在jQuery中,选择器分为多种类型,包括基础选择器、类别选择器、ID选择器、属性选择器、后代选择器、子元素选择器、相邻兄弟选择器和通用选择器等。 1. **基础选择器**:主要包括`$()`,用于选取一个或多个DOM元素...
- `E F`: 选择器 `E` 后面跟着选择器 `F` 的所有元素,即后代元素。 - `E > F`: 选择器 `E` 直接包含选择器 `F` 的所有元素,即子元素。 - `E + F`: 选择器 `E` 后面紧跟一个选择器 `F` 的元素,即同级相邻元素。...
1. **#id**:基于元素ID进行选择,如`$("#divId")`将选取ID为`divId`的唯一元素。 2. **element**:按元素名称选择,例如`$("a")`将选取页面上所有的`<a>`标签。 3. **.class**:根据元素的CSS类名选择,如`$("....
选择器分为五种基本类型:标签选择器、class选择器、ID选择器、后代选择器和伪类选择器。 1. 星状选择符(*) 星状选择符(*)是CSS选择器中最简单的一种,作用于所有元素。例如:`* { margin: 0; padding: 0; }`...
1. **ID选择器**: 使用`#`符号来选取具有特定ID的元素,例如`$("#myID")`将选取ID为"myID"的元素。 2. **类选择器**: 使用`.`符号来选取具有特定类名的元素,例如`$(".myClass")`将选取所有class为"myClass"的元素。...
可以将上述选择器组合使用,例如选取所有`class`为`highlight`并且`id`为`mainContent`的元素: ```java Element mainHighlight = doc.select(".highlight#mainContent").first(); ``` ### 结合jsoup进行实际操作 ...
层次选择器基于DOM元素之间的层次关系选取特定元素,包括后代、子、相邻和兄弟元素。 - **后代选择器**:通过空格来选取后代元素,例如`$('div span')`选取所有`<div>`元素内的`<span>`元素。 - **子选择器**:通过...
2. ID选择器:通过ID来唯一选择元素,以"#"开头,例如`#uniqueID`。 3. 标签选择器:直接使用元素名作为选择器,例如`p`代表所有段落元素。 4. 通配符选择器:`*`,匹配任何元素。 三、组合选择器 1. 交集选择器:...
首先,jQuery提供了多种基础选择器,如ID选择器(`#id`)、类选择器(`.class`)、元素选择器(`element`)以及组合选择器(如`$("#id .class")`,选取ID为id内所有类为class的元素)。这些基本选择器可以让你快速...
总结起来,jQuery的层次选择器是DOM操作的利器,包括后代选择器、子元素选择器、相邻兄弟选择器和后续兄弟选择器。它们提供了灵活的选取方式,让开发者能根据元素之间的关系进行精准操作。结合实际的HTML结构和...