css伪类用法

一、  :after  与 :befor

<div class="aaa">
	<div class="bbb">伪类测试</div>
</div>

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

用之前     用之后

二、 :focus

<input class="ccc" type="text" value="test" />

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

用之前   用之后

三、 :first-child 与 :last-child

<ul class="aaa">
	<li>11</li>
	<li>22</li>
	<li>33</li>
	<li>44</li>
	<li>55</li>
</ul>

.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)……

<ul class="aaa">
	<li>11</li>
	<li>22</li>
	<li>33</li>
	<li>44</li>
	<li>55</li>
	<li>66</li>
</ul>

.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，若不是，则选择失败。

看例子比较直观

<div class="aaa">
	<span>11</span>
	<span>22</span>
	<p>我是p</p>
	<span>33</span>
	<span>44</span>
	<span>55</span>
	<span>66</span>
</div>

.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) 除了某个元素外

<ul class="aaa">
	<li>11</li>
	<li>22</li>
	<li>33</li>
	<li>44</li>
	<li>55</li>
	<li>66</li>
</ul>

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

用之前  用之后

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

<p>测试 <i>测试</i>测试<i>测试</i></p>
<p>测试 <i>测试</i>测试<i>测试</i></p>

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

用之前    用之后

八、 :lang

<p>测试 测试<q lang="no">引用</q>测试测试</p>

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  /* 选定的链接 */