最实用css3常用知识点梳理一：选择器+计数器

一：css3选择器

上一篇《a元素状态伪类顺序的分析》

1.状态伪类选择器

1.1 利用正在处于的某种状态选中某个元素，语法：元素+:+状态表示
如a:visited p:hover
1.2 伪类与元素:并不是所有的元素都可以使用伪类
1.2.1 a元素特有的:link :visited :active等
这里需要注意的是在给a元素添加伪类样式时书写顺序是有要求的详细见我的上一篇文章的:《a元素状态伪类顺序的分析》**相信你会对状态伪类有一个更深的认识
1.2.2表单元素独有的:disabled :checked等

2.结构化伪类选择器:
2.1 根据页面文档的结构，有规则的选中元素
2.2 nth-of-type(an+b) an+b a个一组中的第b个，an相当于an+a:
从同一层级的特定类型元素中选符合规则的元素
2.3 nth-child（an+b）
从同一层级的所有元素中选符合选择符合规则的特定类型元素
3.伪元素:
3.1 伪元素用css添加的不在dom节点书中的元素，具有如下几个特点
（1）无法通过js获取其DOM
（2）“寄生”于其他元素，无法通过浏览器直接查看
（3）未完成某种功能添加，其样式中必须有content属性
（4）伪元素默认是inline元素
3.2 常见的伪元素有:before :after,其中:after常用来清楚浮动产生的父元素高度塌陷

.clearbox:after{
content:"";
display:block;
(用display:table更有比格)
clear:both;
visibility:hidden:0;

(另有写法，如果content内不是空字符串，还要加上
height:0
line-height:0;
)
}
3.3 content属性，这个属性可以配合其他“方法”读取一些值
比如 attr（title），读取应用这个伪元素选择器的元素的title属性
counter(num),读取奇数器num中的值
3.4 伪元素的标准语法是::关键字，但为了兼容ie低版本，一般写出:关键字

二: css计数器

用counter-increment: num（任意合法名称）;声明一个计数器
这个计数器是一个样式，其该样式生效后num值就会自动加1；
可以用counter（num）读取num的值，从1开始读取，常配合伪元素选择器中的content属性使用

三:DOM原生支持的添加样式的方法

大家都知道，用js操作样式常有的就是动态操作元素DOM的class的属性
但原来的js对这种操作方式并不有好，人们常常要自己封装函数，或者
引入外部框架来简化操作，但现在原生有了动态操作class属性的方法了！（本文为一个句尾符号献给官方爸爸）
classList:HTML5 在DOM中新增的操作 class 属性的对象，封装在每个元素DOM对象里。里面封装着add（），remove（），toggle（），contains（）等方法，length等属性使用方法与jQ中对class属性的操作基本无二

说实话编者是一个原生js的死忠，痴迷并崇拜于js中在貌似松散中隐藏的巨大创造力，也习惯并享受在为实现某个功能编写一行行代码，封装一个个函数。相信你们也有类似的感受。但不可否认是，那些站在数据结构与编译原理两山顶峰，坐在数学和算法王座上的大牛们，一直都在做一件事，让编程变得更简单，让开发者能用更简洁的代码实现更大的功能。在这个方面我们jser可能本身就是最大的受益者，又有什么立场不去接受这种趋势。铁匠制造了更好用的锄头，我们这些做农民的为了提高生产力，当然是要好好学好好用。最重要的是在种地的同时也别忘了登山。前路漫漫，一眼望不到头，还有什么比这更让人兴奋的吗。