前台开拓从新提及：谈谈CSS选择符

早年我接管了网上不少博文的说法，一向以为进修css的三大最重要题目是：盒模子、定位、浮动。由于这三块的内容抉择了css机关的手段。可是通过上一篇文章的说明，xhtml要实现和css的解耦，就要只管不依靠于css（可能说不要纯粹为了给css预留接口而添加不须要的class和id），那么，在用css机关之前，着实就有一个更紧要的使命摆在我们的眼前——怎样将css法则精确应用到方针元素。于是，css选择符的职位在这个条件下就空前的进步了。以是，在开始进修盒模子、浮动、定位之前，有须要回首一下选择符。

一样平常轻微打仗过css的网页计划职员，城市很快地学会三种css选择符：

元素选择符（譬喻：body 、a 、li ）
ID选择符（譬喻：#head、#body、#foot）
类选择符（譬喻：.red、.item、.content）
更进一步之后，开始相识到一些进阶的选择符：

儿女选择符（譬喻 #head .menu、#foot #copyright）
伪类选择符（譬喻 a:hover、a:link）
以及由这些选择符组合起来形成的综合选择符。现实上css还支持一些更富厚的选择符。可是可以或许被赏识器普及支持的着实首要就是上面这几种，其余的选择符在css中每每用来区别处理赏罚差异的赏识器，可能用在jQuery一类的框架中。本文就不提了。有乐趣的可以本身在网上查一下，像属性选择符（input[type=’password’]、input[type=’radio’]）、直接儿女选择符（body > div、 #head > ul）等。

现实上，有了上面列出的五种首要的选择符，通过对它们的组合，已经可以或许满意我们绝大部门时辰的要求了，这也就意味着，沟通布局下的元素，父级元素可能祖先元素只要有一点点区别，我们就可以或许在不借助id可能class的环境下直接会见到。譬喻：

这个布局是我在《来自微软的纯css下拉菜单》一文顶用到的下拉菜单布局。在谁人示例中，没有行使任何的class可能id，可是我们通过差异优先级的元素+靠山选择符，对布局中的差异条理的ul、li、a实现了准确定位。如下面的代码：

那么，在现实开拓中，为什么许多网页计划职员照旧离不开无独有偶的ID和class呢（我要声明一下，我从来没有说完全丢弃id和class，我的概念是他们应该只管少，而且由文档布局抉择而不是由css必要抉择）？我认为有三方面的缘故起因：

第一、xhtml文档布局不公道，通过元素不能浮现文档的条理布局。满篇都是div。没有有用操作Hx系列标签和ul、ol、dl等差异寄义的列表标签、没有有用操作p、quote、pre等标签。xhtml为我们提供了富厚的标签元素，可是假如我们只会用div，那还不如人家用table来机关的。至少他的table在必然水平上也是文档布局的浮现，而满篇嵌套的div，文档布局完全没浮现。

第二、css选择符把握得不足，不擅长借助文档布局条理上的渺小区别，用差异的组合选择符来区别相似但着实差异的元素。譬喻上面的下拉菜单布局，有的人就非要用“menu”和“submenu”来区别。

第三、css选择符的优先级不清晰。css是支持担任和包围的，什么时辰担任，什么时辰包围。两条法则都对沟通元素做出了样式划定并且样式划定一再的环境下，哪一条法则会被应用呢？这些题目不清晰，就没步伐充实操作优先级实现法则的包围。于是只好每个要应用样式的元素都加上id可能class。关于css选择符的优先级，网上也有许多文章，我就不赘述了。

以是说，假如感受离不了class，离不了id，那只能声名两个题目——xhtml布局不公道可能css把握得还不足。我上一篇文章发了往后，有位伴侣评述说我没做过前台开拓。由于没有class和id，就不能实现css和javascript的疏散。现实上，只要是恒久深入进修css和javascript的伴侣应该都清晰：在布局有差此外环境下，用css选择符就能准确定位某个元素；在布局完全沟通的环境下，借助javascript和DOM，同样可以准确定位某个元素。

如故以上面的下拉菜单列表为例。起首行使 ul a 对父级菜单的链策应用样式，然后用ul ul a就可以准确定位到次级菜单的链接，应用新的样式，对ul a的界说举办包围。那么，假如是要准确定位到第二级菜单的第二个元素呢？因为css3的选择符今朝还没被普及支持，而布局又没有差别，不借助javascript有坚苦了。可是借助于javascript，很是轻松，好比在jQuery中，我们可以用 $("ul ul:nth(2) li:nth(2)”) 可能 $("ul ul”).eq(1).find(“li”).eq(1) 都能获得第二个子菜单的第二个菜单位素。

css和javascript可以或许本身准确找到网页中的任何一个元素，那么网页天然就不消本身标识本身的每个元素。少了这层承担，我们在计划网页文档布局的时辰，天然就可以丢弃统统后顾之忧，那么，xhtml中和布局无关的id和class，尚有什么须要存在呢？

去除了不须要的示意元素和属性（font、center、align、height）之后，又去除了不须要的id、class、onclick、onmouseover之类的样式和举动属性，我们的网页源代码尺寸越来越小，抓一个页面下来，少量须要的布局元素之外，剩下的满是链接和内容，这样的网站，搜刮引擎能不喜好吗？

没有了后顾之忧，认清了全力偏向，那么下一次我们就来谈谈css的盒模子。

转自：http://www.cnblogs.com/dvbhack/

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!