本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。
在前端项目开发中, 测试提的 红点点 有好多都是和 CSS 样式相关的. 比方说 经典的 1px; 这个按钮少了圆角; 那个搜索框没有 placeholder, 两个框框的间距不对, 等等. 这些都是和 CSS 相关的, 今天学习了 CSS 相关的知识点, 本文来作下总结:
CSS 的伪元素
记得刚开始学习 CSS 的时候, 伪类/ 伪类选择器 和 伪元素总是傻傻分不清. 有些知识点回过头来再来看还是很陌生, 今天重新温习一遍.
什么是伪元素:
在项目开发中经常使用的是 ::before 和 ::after, 经常用来清除元素浮动来解决浮动产生的问题. 下面看一下清除浮动的具体代码:
/** .box-clear 类名 这里 clear 仅作为提醒标记一下, 经常用作 .box::after */
.box-clear::after {
content: '';
width: 0;
height: 0;
display: block;
clear: both;
}
伪元素的定义
伪元素 英文名为 pseudo-element, 按照翻译就不是真正的元素, 可以通过 CSS 来设置使用.
伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。 - MDN-伪元素
设置的内容可以被客户端看到: 如上代码 content 为空是为了清除浮动, 不需要我们看到什么内容, 当然也可以通过设置属性值 content: "要显示的内容", 来显示内容, 相当于一个元素
伪元素的作用:
那伪元素都用来干什么呢, 伪元素可用于：
- 设置元素的首字母、首行的样式
- 设置在元素的内容之前或之后插入的内容
- 设置选中元素的样式: 比方常用的选中文本的背景颜色
伪元素的分类:
我们常见的就是 ::before 和 ::after, 另外还有两个比较早有使用到的, ::first-letter 和::first-line 在一些老点的网站, 还有一个大部分网站都用得到的, 就是我们用鼠标选择内容后, 可以看到选择的文字有样式变化, 比方背景颜色变化, 那就是 ::selection
常用的 5 个 CSS 伪元素列表:
| # | 伪元素 | 示例 | 效果例子描述 |
|---|---|---|---|
| 1 | ::first-line | section::first-line | 选择每个 <section> 元素的第一行行 |
| 2 | ::first-letter | setion::first-letter | 选择每个 <section> 元素的首字母 |
| 3 | ::before | h1::before | 在每个 <h1> 元素之前插入内容 |
| 4 | ::after | h1::after | 在每个 <h1> 元素之后插入内容 |
| 5 | ::selection | div::selection | 选择用户选择的元素部分(通常为文本) |
实验中的 5 个伪元素:
另外根据 MDN 文档, 也有实验中的(Experimental)伪元素:
下面 5 个是还在实验中的伪元素, 大家可到 MDN -- CSS/Pseudo-elements 具体学习探索
::placeholder::spelling-error::marker::backdrop::grammar-error
每个伪元素的具体用法
// 具体语法结构: 选择器跟着伪元素 内部设置属性和属性值:
selector::pseudo-element {
property: value;
}
一个选择器中只能使用一个伪元素。伪元素必须紧跟在语句中的简单选择器/基础选择器之后。
注意：按照规范，应该使用双冒号（::）而不是单个冒号（:），以便区分伪类和伪元素。但是，由于旧版本的 W3C 规范并未对此进行特别区分，因此目前绝大多数的浏览器都同时支持使用这两种方式来表示伪元素。
1. 以 ::first-line 伪元素 举例, 其他可参考 MDN学习探索:
::first-line 伪元素可改变段落首行文字的样式。
/* 每一个 <p> 元素的第一行。 */
p::first-line {
color: red;
text-transform: uppercase;
}
2. ::first-letter 伪元素
3. ::before 伪元素
4. ::after 伪元素
5. ::selection 伪元素
参考:
掘力星评论抽周边
稀土掘金官方扶持, 各大评论区抽100份周边, 详情请查看 掘力星计划
