html5 css的用处,CSS选择器妙用

如果你在看过我们之前关于HTML、JS以及CSS的文章之后开始对它们有所了解，那么你就应该开始花心思在如何使得相应的代码写得更为简洁高效上，今天我们就来探讨一下，同样的一个元素，是否可以通过CSS选择器的使用技巧从而达到最快速也最高效的选择。

采用ID选择元素

ID是很多新手特别喜欢用的元素属性，因为它简单方便快捷，想要取哪个元素，只要加上ID就行了。

但是这样真的更加高效合理吗？从某种意义上来说，ID的选择确实是最为方便快捷的，但是如果一个HTML文档结构中充斥了过多ID元素，就失去了原本ID存在的意义。

只有当该元素在文档结构中充当搭建布局的作用，并且是唯一的一个元素的时候，你才能使用ID来标识它。

最简单的例子，比如一个网站的头部、主体、以及尾部，它们作为整个网站的结构而存在，而在一个页面文档结构中，它们又是唯一存在的，所以这时候，我们需要用ID来区分它们。比如header、main、以及footer。你可以通过网站基础结构这篇文章来了解更多。

采用CSS选择器来指定这些元素的方式非常简单，只需要#id即可，如果你是想要在jQuery中选择它们，也只需要$(“#id”)即可。

采用Class选择元素

Class，顾名思义就是样式，在整个网站中都是可以重复使用的，那么它的意义跟ID就有本质上的区别。

Class主要用于同种样式的元素(颜色、大小、间距等等)，通过样式的控制，能够非常方便迅速地修改整站元素样式。

例如一个网站的按钮样式非常多，如果你定义了不同样式，btn-red、btn-blue、btn-green，你就可以非常迅速地在对应元素中引入。

CSS选择器选择样式的方法也很简单，.btn-red即可(点+样式名称)，而对应的jQuery就是$(“.btn-red”)。

采用属性选择元素

自从HTML5规范流行以来，越来越多的人开始懂得在HTML元素中嵌入数据来更加灵活地与JS进行数据互动，例如data-xxx属性，就能通过属性选择器获取。

属性选择器的使用环境应该是怎样的呢？

例如一个你想要对登录框进行不同的操作，那么你完全可以把操作方式放入button当中的data-action属性中，那么整站其他有多方式操作的表单按钮就可以统一通过一个选择器选中，然后采用JS进行处理。

CSS选择器根据属性选择元素的书写方式，可以采用类似 button[data-action*=“action”] 来选中，同样jQuery中也只需要通过$(“”)包含起来即可。

采用nth-child选择元素

如果你想要在一些有序的元素中(例如ul、ol等)实现错落有致的样式，那么就可以通过nth-child来迅速实现。

最简单的nth-child写法比如li:nth-child(n)，就是选择了第n个li元素。

同样你也可以通过nth-child(odd)或者nth-child(even)从而对排序中的奇数或者偶数进行选择。