CSS的常用伪类与伪元素
CSS 伪类用于向某些选择器添加特殊的效果，伪元素用于向某些选择器设置特殊效果，常用的伪类与伪元素主要有：
| 属性 | 描述 | |
|---|---|---|
| 伪类 | :link | 超链接添在正常浏览状态时的样式 |
| :visited | 被单击过的链接样式 | |
| :hover | 鼠标指针悬停在超链接上时的样式风格 | |
| :active | 当前激活（在鼠标单击与释放之间发生）的样式风格 | |
| :first-child | 向元素的第一个子元素添加样式 | |
| 伪元素 | :first-letter | 向文本的第一个字母添加特殊样式 |
| :first-line | 向文本的首行添加特殊样式 |
实例1. 向文档中的超链接添加不同的样式
<head>
<title>CSS伪类</title>
<style type="text/css">
</style>
</head>
<body>
<p><a
<p><a
<p><a
<p><a
<p><a
</body>
<title>CSS伪类</title>
<style type="text/css">
a.one:link{ color:blue;}
a.one:hover {color:gray;}
a.one:active {color:red;}
a.two:hover {font-size: 150%}
a.three:hover {background: #66ff66}
a.four:hover {font-family:隶书;}
a.five:hover {text-decoration:none;}</style>
</head>
<body>
<p><a
class="one" href="http://www.hyit.edu.cn"
target="_blank">单击我，这个链接改变颜色</a></p><p><a
class="two" href="http://www.hyit.edu.cn"
target="_blank">单击我，这个链接改变字体大小</a></p><p><a
class="three" href="http://www.hyit.edu.cn"
target="_blank">单击我，这个链接改变背景颜色</a></p><p><a
class="four" href="http://www.hyit.edu.cn"
target="_blank">单击我，这个链接改变字体</a></p><p><a
class="five" href="http://www.hyit.edu.cn"
target="_blank">单击我，这个链接改变文本装饰</a></p></body>
实例2. 使用 :first-child 伪类来选择元素的第一个子元素
:first-child伪类选择器用于匹配它的父元素的第一个子元素，也就是说这个元素是它父元素的第一个儿子，而不管它的父元素是哪个。
下面的实例中，段落标记p的父元素是div，那么将div的第一个段落子元素p内的文本设置为蓝色粗体，将li父元素的第一个li子元素设置为红色文本：
<head>
<title>CSS伪类</title>
<style type="text/css">
</style>
</head>
<body>
<div>
<p>这是第一个段落p标记</p>
<p>这是第二个段落p标记</p>
<p>这是第三个段落p标记</p>
</div>
<ul>
<li>这是第一个列表li标记</li>
<li>这是第二个列表li标记</li>
<li>这是第三个列表li标记</li>
</ul>
</body>
<title>CSS伪类</title>
<style type="text/css">
p:first-child{
color:Blue;
}
li:first-child{
color:Red;
}</style>
</head>
<body>
<div>
<p>这是第一个段落p标记</p>
<p>这是第二个段落p标记</p>
<p>这是第三个段落p标记</p>
</div>
<ul>
<li>这是第一个列表li标记</li>
<li>这是第二个列表li标记</li>
<li>这是第三个列表li标记</li>
</ul>
</body>
实例3. 使用 :first-letter 伪元素用于向文本的首字母设置特殊样式
下面的实例中，将类名为one的段落p的首字设置颜色以及字号，将类名为two的段落p的首行设置为红色文本：
<head>
<title>CSS伪类</title>
<style type="text/css">
</style>
</head>
<body>
<p
<p
</body>
<title>CSS伪类</title>
<style type="text/css">
p.one:first-letter{
color:Blue;
font-size:2em;
}
p.two:first-line{
color:Red;
} </style>
</head>
<body>
<p
class="one">有无数多的方法来实现将用户分享的内容呈现到互联网上，包括今年出现的一些社交网站分享或者一些在线分享或者在线发布工具等。随着大规模集成分享按钮的应用，以及逐渐采用客户端、weidget页面组件、和在线书签等的应用方式，这，将使分享越来越容易和简便。实时分享的下一方向将会是个人在线阅历或经验分享，在
2011年，这点将会决定互联网是否更加好用。</p><p
class="two">诚然，不同的技术实现不代表着新技术是更好的，我们肯定不会像扔掉小孩子一样轻易放弃原有技术，技术实现的过程总是有所取舍。就像Ted
Dziuba wrote所说，选择取代MySQL或者Postgres数据库技术，而使用一个新的不同的技术方案，就意味着你已经使用了一个有很多局限性的不成熟技术，来取代另一个毛病多多的旧技术。</p></body>
©版权所有: 淮安深度人工智能科技有限公司2020, 备案号:苏ICP备2020056902号-2 | 技术支持：淮阴工学院计算机与软件工程学院《Web开发技术》教学团队