伪元素



伪元素:一个标签的不同的状态，最常用的是超链接

a:link 超链接的正常状态(没有任何动作前)

a:visited 访问过的超链接状态

a:hover 光标移动到超链接上的状态

a:active 鼠标按下时的状态

p:first-line 段落中的第一行文本

p:first-letter 段落中的第一个字母

h1:first-child{ color:red; font-size:14px;}
<h1>后盾网 http://www.houdunwang.com</h1>
<h1>后盾网 http://www.houdunwang.com</h1>
第一个h1标签颜色为红色，字体大小为14px 而第二个h1标签原样显示，不受影响

div .d1>h1:first-child { color:red; font-size:20px;}
<div class="d1">
  <h1>后盾网 http://www.houdunwang.com<span>免费视频教程</span></h1>
  <h1>后盾网 http://www.houdunwang.com<span>免费视频教程</span></h1>
</div>

<div class="d1">
  <h1>后盾网 http://www.houdunwang.com<span>免费视频教程</span></h1>
  <h1>后盾网 http://www.houdunwang.com<span>免费视频教程</span></h1>
</div>

两个div标签里面的首个h1标签颜色都为红色，字体大小都为20px

div .d1>h1:first-child span{ color:red; font-size:20px;}
<div class="d1">
  <h1>后盾网 http://www.houdunwang.com</h1>
  <h1>后盾网 http://www.houdunwang.com</h1>
</div>

<div class="d1">
  <h1>后盾网 http://www.houdunwang.com</h1>
  <h1>后盾网 http://www.houdunwang.com</h1>
</div>
两个div标签里面的首个h1标签里面的span标签颜色都为红色，字体大小都为20px

p:first-letter{ color:#060; font-size:80px;}
<p>http://www.houdunwang.com 后盾网</p>  <!--h大小为80px，颜色为绿色0 -->
<p>后盾网 http://www.houdunwang.com</p>  <!--后大小为80px，颜色为绿色0 -->