CSS 伪类 注意事项总结

锚伪类

提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

提示：伪类名称对大小写不敏感。

 

伪类与 CSS 类

a.red : visited {color: #FF0000}
假如上面的例子中的链接被访问过，那么它将显示为红色。

 

 

CSS2 - :first-child 伪类

 

匹配所有 <p> 元素中的第一个 <i> 元素

p > i:first-child {
  font-weight:bold;
  }

 

选择器匹配所有作为元素的第一个子元素的 <p> 元素中的所有 <i> 元素

p:first-child i {
  color:blue;
  }

 

制作首字母特效

p:first-letter
{
color: #ff0000;
font-size:xx-large
}

 

制作首行特效

p:first-line
{
color: #ff0000;
font-variant: small-caps
}

 

提示：first-line 伪元素仅能被用于块级元素。

提示：下面的属性可以被应用到 first-line 伪元素。

• font 属性
• color 属性
• background 属性
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• clear

 

 

 

伪元素和 CSS 类

p.article:first-letter {color: #FF0000}
<p class="article">文章中的一个段落。</p>

 

 

 

 

多重伪类

<STYLE TYPE="text/css">
p {font-size: 12pt;}
p:first-letter {color: #FF0000; font-size: 24pt;}
p:first-line {color: #0000FF;}
</STYLE>
<p>The first words of an article</p>