css伪类用法

一、  :after  与 :befor

	
伪类测试

.bbb:after{content:'我在后';margin-left:10px;color:red;}
.bbb:before{content:'我在前';margin-right:10px;color:red;}

用之前     用之后

 

二、 :focus

.ccc:focus{background-color:yellow;}

用之前   用之后

 

三、 :first-child 与 :last-child

	
11
	
22
	
33
	
44
	
55

.aaa{width:800px;margin:20px auto;text-align: center;line-height:30px;}
.aaa li:first-child{color:red;font-weight: bold;}
.aaa li:last-child{color:green;font-weight: bold;}

用之前   用之后

 

四、 Odd 和 even  奇、偶 或者指定第几个nth-child(n) 、 nth-child(2n+1)……

	
11
	
22
	
33
	
44
	
55
	
66

.aaa{width:500px;margin:20px auto;line-height: 30px;}
.aaa li:nth-child(odd){background:pink;} /*奇*/
.aaa li:nth-child(even){background:yellowgreen;}/*偶*/
.aaa li:nth-child(2){background:green;}/*指定第二行*/

用之前  奇数偶数 用之后   指定第二行

 

五、 :nth-of-type() 与nth-child()效果一样，但是还是有区别的：

ele:nth-of-type(n)是指父元素下第n个ele元素，而ele:nth-child(n)是指父元素下第n个元素且这个元素为ele，若不是，则选择失败。

看例子比较直观

	11
	22
	
我是p
	33
	44
	55
	66

.aaa{width:500px;margin:20px auto;line-height: 30px;}
.aaa span{display: block;}
.aaa span:nth-child(3){background:green;}
.aaa span:nth-of-type(3){background:green;}

没加伪类之前   用nth-child选择第三个子元素     用nth-of-type选择第三个子元素

可以很明显的看出nth-child选择失败，而nth-of-type就可以找到span的第三个元素

 

六、 :not(:first-child) 除了某个元素外

	
11
	
22
	
33
	
44
	
55
	
66

.aaa{width:500px;margin:20px auto;line-height: 30px;}
.aaa li:not(:first-child){background:green;}/*除了第一个以外*/

用之前  用之后

 

七、 匹配所有某元素中的第一个元素  如：p里的i

测试 测试测试测试
测试 测试测试测试

p{width:500px;margin:20px auto;color:#666;}
p > i:first-child {font-weight:bold;color:red;} 

用之前    用之后

八、 :lang

测试 测试引用测试测试

p{width:500px;margin:20px auto;color:#666;}
q:lang(no){quotes: "~" "~";color:red;font-weight:bold;}

用之前   用之后

 

a:link   /* 未访问的链接 */
a:visited  /* 已访问的链接 */
a:hover  /* 鼠标移动到链接上 */
a:active  /* 选定的链接 */