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

在线学习好工作 / CSS3 学习之常见的4 种伪元素选择器 在CSS3 开发中，常见的伪元素选择器主要有4 种，下面就和大家一起来扒一 扒。 first-line 伪元素选择器 我们在这个后面接着来写，我们写一个段落 p 在CSS 中，主要有四个伪元素选择器br/ first-line 伪元素选择器用于向某个元素中的第一行文字使用样式。 /p 我们所说的这个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 里面呢有这个很多的链接。 lia href=index1.html伪类选择器/a/li lia href=index1.html伪类选择器/a/li lia href=index1.html伪类选择器/a/li lia href=index1.html伪类选择器/a/li lia href=index1.html伪类选择器/a/li lia href=index1.html伪类选择器/a/li lia href=index1.html伪类选择器/a/li 我们在这个链接之前给它加入一个符号，我们看一下怎样来实现。那么在加入 之前我们先来看一下是什么样的一个样式。 设这样的一个样式，那么我们来给它这样来，它默认的这个例的话是有有一个 前面有这个圆点。那么我们把它给去掉。那么怎样去掉，在这里。 li{ list-style: none; } 这个方法来将它去掉。 这样就将默认的圆点给去掉了，然后我们在这个例之前呢给它加一个圆点，通 过这个元素之前的方法给它一个追加，追加之前呢它一个小圆点。 li:before{ content:...; color: red; } 我们来测试一下。在前面就有这个小点点了，那么我们加一个小圆点？ 它就有很多个小圆点，这就是在前面追加的方式。我们来看在后面追加的方式。 li:after{ content: __after 追加; color: #ff6600; } before 伪元素选择器 在每个 p 元素的内容之前插入新内容： p:before { content: 内容：; } :before 选择器在被选元素的内容前面插入内容。 请使用 content 属性来指定要插入的内容。 文章来源：麦子学院 原文链接：/wiki/css3/css/