[快速入门前端 16] CSS 选择器 (6) 伪元素选择器

伪元素

伪元素，指的是元素中一些特殊的位置，因为他不是一个真正的元素，所以被称为伪元素。伪元素在选择器中的写法为 ::伪元素，下面就让我们来介绍常见的伪元素吧！

特定位置的文字

当我们在一个文字段落时，可能会需要对特殊位置的文字进行样式设定，这时就可以使用伪元素选择器。::first-letter 是指该元素中的第一个字元；而 first-line 是指该元素的首行。

语法：

p::first-letter{ /* 选择 p 元素内的第一个字元 */    属性名: 属性值;}p::first-line{ /* 选择 p 元素内的第一行 */    属性名: 属性值;}

範例：

p::first-letter{ /* 选择 p 元素内的第一个字元 */    color: red;    font-size: 30px;}p::first-line{ /* 选择 p 元素内的第一行 */    background-color: rgb(255, 255, 210);}

<p>我们都知道，只要有意义，那麽就必须慎重考虑。为什么你好对我们来说这么重要？总结的来说，爱因斯坦有讲过一句名言，人只有献身于社会，才能找出那短暂而有风险的生命的意义。这让我深深地想到，至于为什么要思考你好呢？其实是</p>

滑鼠选中的文字

範例：

div::selection { /* 滑鼠选中的地方 */    background-color: yellow;    color: red;}

input 框提示文字

::placeholder 会选择输入框中提示文字，也就是 placeholder 中的值。
範例：

input::placeholder {    color: skyblue;}

<input type="text" placeholder="快输入！">

before & after

::before 和 ::after 是最常见也最重要的伪元素，会在元素内容的最前和最后加入一个新的元素，并设定相应的样式，这种方法可以在複杂的结构中让程式码看起来较乾净整洁。

语法：

元素::before { /* 在元素前新增一个元素并显示 content 内容 */    content: '内容'; /* content 是必要属性，否则不会显示到页面上 */}元素::after { /* 在元素后新增一个元素并显示 content 内容 */    content: '内容';}

範例：

label::before {    content: '$';    color: red;    font-size: 30px;}label::after {    content: '元';}

<label>999</label><br/><label>1999</label>

伪元素中的 before 和 after 经常用在结构和样式複杂的页面，不过目前我们大概知道他的原理就好，其他的样式和排版设定之后再慢慢深入了解。

上一篇：[快速入门前端 15] CSS 选择器 (5) Pseudo-Classes 伪类 - UI状态伪类、否定伪类、目标伪类、语言伪类
下一篇：[快速入门前端 17] CSS 选择器 (6) 选择器总结
系列文章列表：[快速入门前端] 系列文章索引列表