CSS3学习之常见的4种伪元素选择器

CSS3学习之常见的4种伪元素选择器
CSS3学习之常见的4种伪元素选择器

在线学习好工作https://www.360docs.net/doc/e515695874.html,/ CSS3学习之常见的4种伪元素选择器

在CSS3开发中,常见的伪元素选择器主要有4种,下面就和大家一起来扒一扒。

first-line伪元素选择器

我们在这个后面接着来写,我们写一个段落

在CSS中,主要有四个伪元素选择器

first-line伪元素选择器用于向某个元素中的第一行文字使用样式。

我们所说的这个first-line,这个选择器是需要向某个元素中的第一行文字使用样式。因为这个br它是换行,也就是说我们使用first-line的话它会,对我们第一行文字进行一个样式,我们来看一下对不对

p:first-line{

color: #f60;

}

第一行我们给它一个橙色

第一行元素p的第一行文字,给它一个橙色,这就是我first-line的使用方法。

first-letter伪元素选择器

就拿我们这里的来测试,我们这样来

p:first-letter{

color: green;

font-size: 24px;

}

第一个文字我们给它一个绿色,然后呢给它加一个字体,我们看一下。

每一个元素中的第一个字我们都设为了绿色,这个字呢还很大很大。

after伪元素选择器

我们在这里新建一个ul在这个ul里面呢有这个很多的链接。

  • 伪类选择器
  • 伪类选择器
  • 伪类选择器
  • 伪类选择器
  • 伪类选择器
  • 伪类选择器
  • 伪类选择器
  • 我们在这个链接之前给它加入一个符号,我们看一下怎样来实现。那么在加入之前我们先来看一下是什么样的一个样式。

    设这样的一个样式,那么我们来给它这样来,它默认的这个例的话是有有一个前面有这个圆点。那么我们把它给去掉。那么怎样去掉,在这里。

    li{

    list-style: none;

    }

    这个方法来将它去掉。

    这样就将默认的圆点给去掉了,然后我们在这个例之前呢给它加一个圆点,通过这个元素之前的方法给它一个追加,追加之前呢它一个小圆点。

    li:before{

    content:"...";

    color: red;

    }

    我们来测试一下。在前面就有这个小点点了,那么我们加一个小圆点?

    它就有很多个小圆点,这就是在前面追加的方式。我们来看在后面追加的方式。li:after{

    content: "__after追加";

    color: #ff6600;

    }

    before伪元素选择器

    在每个

    元素的内容之前插入新内容:

    p:before

    {

    content:"内容:";

    }

    :before 选择器在被选元素的内容前面插入内容。

    请使用content 属性来指定要插入的内容。

    文章来源:麦子学院

    原文链接:https://www.360docs.net/doc/e515695874.html,/wiki/css3/css/

    相关主题
    相关文档
    最新文档