CSS常用伪类和伪元素使用详解
伪类和为元素的写法首先伪类是用单冒号表示：如:link, :visited, :hover, :active, :focus, :first-child, :last-child, :nth-child, :nth-last-child, :not()
然后伪元素用双冒号表示：如::first-letter, ::first-line, ::before, ::after
1.用于链接的几个伪类元素
:link 用这个可以设置未被访问的链接的样式
:visited 用这个设置已经被访问的链接的样式
:hover 用于设置将鼠标悬浮在链接上的样式
:active 用于设置鼠标点击链接时到鼠标松开时的样式
:focus 用于设置用键盘将焦点放在链接上时的样式（如用tab键或者上下键来移动页面焦点时）
上面的几个都比较简单。我简单以:hover为例。
<!DOCTYPE html>
<html>
<head>
<style>
a:hover
{
background-color:yellow;
}
</style>
</head>
<body>
<a href="http://www.w3school.com.cn">W3Sschool</a>
<a href="http://www.google.com">Google</a>
<a href="http://www.wikipedia.org">Wikipedia</a>
<p><b>注释：</b>:hover 选择器鼠标指针在其上浮动的链接设置样式。</p>
</body>
</html>
2.常用于列表元素<i>的几个伪类
:first-child 选中列表中的第一个元素
:last-child 选中列表中的最后一个元素
:nth-child() 括号里面的取值可以为三类：1)数字 :nth-child(3)表示选中父元素的第三个子元素
2)自变量为n的表达式 :nth-child(3n)代表选中父元素的第3,6,9.....3n的子元素
3)even或者odd 分别代表选中父元素的奇数或者偶数个子元素
:nth-last-child() 与 :nth-child()的不同点在于，这个是从最后一个元素开始计算，取值都是一样的。
<!DOCTYPE html>
<html>
<head>
<style>
p:nth-child(3)
{
background:#ff0000;
}
</style>
</head>
<body>
<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p><b>注释：</b>Internet Explorer 不支持 :nth-child() 选择器。</p>
</body>
</html>
注意是p元素的父元素<body>的第三个子元素哟，所以背景色才会出现在那个位置！！
3. :not()元素的使用
这个元素的使用很简单，举个栗子即可
<!DOCTYPE html>
<html>
<head>
<style>
p
{
color:#000000;
}
:not(p)
{
color:#ff0000;
}
</style>
</head>
<body>
<h1>这是标题</h1>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<div>这是 div 元素中的文本。</div>
<br>
<a href="http://www.w3school.com.cn" target="_blank">访问 W3School ！</a>
</body>
</html>
选中非<p>的其他所有元素
页:
[1]