CSS 基础 例子 伪元素和伪类 & 区别

一、概念

• CSS 伪类 　　-------向某些选择器添加特殊的效果，要达到同等效果，通过类来达到效果
• CSS 伪元素     -------将特殊的效果添加到某些选择器，要达到同等效果，通过添加元素达到效果

伪类种类

伪元素种类

 

二、基本例子

伪类：

p>i:first-child {color;red}

p下边的第一个子元素的颜色为红色

<p>
　　<i>first</i>
　　<i>second</i>
</p>

要达到同等效果，可以这么实现：

.first-child {color;red}

<p>
　　<i class="first-child">first</i>
　　<i>second</i>
</p>

即，通过设置class来实现

 

伪元素：

p:first-letter {color: red}

p元素的中文本的第一个字母，颜色为红色

<p>I am stephen lee.</p>

即字母I为红色

要达到同样效果，要讲字母I放在一个元素span中，再给span设置样式

.first-letter {color: red}

<p><span class='first-letter'>I</span> am stephen lee.</p>

 

区别：伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。

 

三、其他例子

伪元素

1、向h1元素之前添加图片

h1:before

{

　　content:url(smiley.gif);

}

2、向h1元素之后添加图片

h1:after

{

　　content:url(smiley.gif);

}

3、为元素和css类结合

p.article:first-letter {color:#ff0000;}

<p class="article">文章段落</p>

即，样式为article的p元素中的第一个字母的样式

 

伪类：

1、a伪类

a:link {color:#FF0000;} /* 未访问的链接 */

a:visited {color:#00FF00;} /* 已访问的链接 */

a:hover {color:#FF00FF;} /* 鼠标划过链接 */

a:active {color:#0000FF;} /* 已选中的链接 */

2、伪类和 css类

a.red:visited {color:#FF0000;}
<a class="red" href="css-syntax.html">CSS 语法</a>

样式类为red的a元素已经访问的样式

3、伪类和组合选择器

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

p元素下的第一个元素里边的所有i元素的样式