网页设计之CSS实战(6) --- 伪类与伪元素

一、伪类

伪类用于向某些选择器添加特殊的效果。
伪类的语法：

selector : pseudo-class {property: value}

CSS 类也可与伪类搭配使用。

selector.class : pseudo-class {property: value}

1、锚伪类

伪类名称对大小写不敏感

a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */

2、first-child 伪类

first-child 伪类来选择元素的第一个子元素。

<!--这里是第一个p元素设为黑体，不是p元素的第一个子元素设为黑体，易误解-->
p:first-child {font-weight: bold;}

3、lang 伪类

为不同的语言定义特殊的规则。

二、伪元素

伪元素用于向某些选择器设置特殊效果。
伪元素的语法：

selector:pseudo-element {property:value;}
selector.class:pseudo-element {property:value;}

1、first-line伪元素

“first-line” 伪元素用于向文本的首行设置特殊样式。

2、first-letter 伪元素

用于向文本的首字母设置特殊样式

3、before 伪元素

在元素的内容前面插入新内容。

h1:before
  {
  content:"hello";
  color:red;
  }

4、after 伪元素

在元素的内容之后插入新内容。