我是伊只雄熊

导航

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元素的样式

 

posted on 2018-01-24 16:59  我是伊只雄熊  阅读(163)  评论(0编辑  收藏  举报