CSS伪类

1).动态伪类

• :link        /*连接没有被访问时/
• :visited   /*连接被访问事后*/
• :hover    /*鼠标悬浮在连接上时*/
• :active    /*鼠标点中激活连接那一下*/
• :focus    /*用于元素成为焦点*/

动态伪类，由于这些伪类并不存在于HTML中,而只有当用户和网站交互的时候才能体现出来，动态伪类包含两种，第一种是咱们在连接中常看到的锚点伪类，如":link",":visited";另一种被称做用户行为伪类，如“:hover”,":active"和":focus"。

 

2).状态伪类

• :enabled
• :disabled
• :checked

咱们把":enabled",":disabled",":checked"伪类称为UI元素状态伪类，这些主要是针对于HTML中的Form元素操做

 

3).CSS3的:nth选择器

:nth序号选择器有如下：

• :first-child选择某个元素的第一个子元素；
• :last-child选择某个元素的最后一个子元素；
• :nth-child()选择某个元素的一个或多个特定的子元素；
• :nth-last-child()选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
• :nth-of-type()选择指定的元素；
• :nth-last-of-type()选择指定的元素，从元素的最后一个开始计算；
• :first-of-type选择一个上级元素下的第一个同类子元素；
• :last-of-type选择一个上级元素的最后一个同类子元素；
• :only-child选择的元素是它的父元素的惟一一个了元素；
• :only-of-type选择一个元素是它的上级元素的惟一一个相同类型的子元素；

1）:first-child和:last-child

a:first-child{}
a:last-child{}

2）:nth-child()和:nth-last-child()

//下面的length为整数，n从0开始不断增长1（n=一、二、三、四、5...）

:nth-child(length);          /*参数是具体数字*/
:nth-child(n);               /*所有*/
:nth-child(2n)               /*2的倍数-偶数*/
:nth-child(2n+1);            /*2的倍数加一-奇数*/
:nth-child(n+length)         /*length加n，n必定要放在前面，包含lengtn,由于n从0开始*/
:nth-child(-n+length);       /*length减n，n必定要放在前面，包含length，由于n从0开始*/
:nth-child(-3n+10)           /*10减3的倍数，n必定要放在前面，包含length，由于n从0开始*/

:nth-last-child()就是:nth-child()从最后往前数

3）:nth-of-type()和:nth-last-of-type()

相似于:nth-child和:nth-last-child,可是这个是相对在同一种元素计算的，在兄弟元素中同种元素的第几个

4）:first-of-type和:last-of-type

相似于:first-child和:last-child,可是这个是相对在同一种元素计算的，在兄弟元素中同种元素的第一个和最后一个

5）:only-child和:only-of-type

分表表示只有一个子元素和同一种元素只有一个

6）:not和:empty

否认选择器和jq中的:not选择器如出一辙，就拿form中的元素来讲明这个选择器的用法，好比你想对form中全部input加边框，但又不想submit也起变化，此时就可使用:not为实现

:not(selector)

div:not(.className){color:red}

:empty

:empty是用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格