CSS3新增选择器：伪元素选择器
一、 ::first-letter 第一个字
二、 ::first-line 第一行（以浏览器为准的第一行）
三、 ::selection 被选中的字行（鼠标选中的字段）只能向 ::selection 选择器应用少量 CSS 属性：color、background、cursor 以及 outline。
<body>
<p>微软的 Internet Explorer(IE) 是当今最流行的因特网浏览器。它发布于 1995 年，并于 1998 年在使用人数上超过了 Netscape。Firefox 是由 Mozilla 发展而来的新式浏览器。
它发布于 2004 年，并已成长为因特网上第二大最流行的浏览器。Opera 是挪威人发明的因特网浏览器。它以下列特性而闻名于世：快速小巧、符合工业标准、适用于多种操作系统。对于一系列小型
设备诸如手机和掌上电脑来说，Opera 无疑是首选的浏览器。Chrome 是免费的开源 web 浏览器，它由 Google 开发。该浏览器于 2008 年 9 月发布。Chrome 4 是最新的谷歌浏览器Safari 是
由苹果公司开发的浏览器，适用于 Mac 和 Windows 系统。该浏览器于 2003 年 6 月发布。</p>
</body>
<style>
p::first-letter{
/* 第一个字母 */
font-size: 50px;
}
p::first-line{
/* 第一行（以浏览器为准的第一行） */
background: rgb(199, 24, 24);
}
/* 被选中的字行（鼠标选中的字段） */
p::selection{
background: #48ff00;
}
::-moz-selection{
/* 兼容 */
background: #48ff00;
}
</style>
四、 ::before 和 ::after
1. 必须带一个属性content
2.在内部内容的前面或者后面插入内容
<div>必须带一个属性content</div>
div::before {
content: "我是插入的内容";
background: #572eb8;
}
3.当插入的内容定义宽高和其他属性时，其实就是一个盒子（必须通过display转换，因为默认是一个行内元素）。
<body>
<div>盒子1</div>
</body>
div{
width: 500px;
height: 500px;
border: 1px solid #000;
}
div::before{
content: "插入的盒子";
display: block;
width: 200px;
height: 200px;
background: rgb(211, 29, 29);
}
4.上述可以解释清除浮动的后面两种方法，单伪元素法和双伪元素法（清除浮动的四种方法：额外标签法，overflow：hidden，单伪元素法和双伪元素法）
五、在字体图标里的运用，直接写入css里，不需要在HTML插入（之前的方法：字体图标）
- 发现一个很坑的问题：input不能使用伪元素（为什么input不支持伪元素(:after,:before)？）
- 示范一个搜索栏的做法，利用字体图标和伪元素，定位：
<body>
<input type="text"><span></span>
</body>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?vhnprv');
src: url('fonts/icomoon.eot?vhnprv#iefix') format('embedded- opentype'),
url('fonts/icomoon.ttf?vhnprv') format('truetype'),
url('fonts/icomoon.woff?vhnprv') format('woff'),
url('fonts/icomoon.svg?vhnprv#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
span {
position: relative;
}
span::after {
content: "\e986";
font-family: "icomoon";
position: absolute;
left: -20px;
top:;
}
当然还有其他做法，比如直接在span里放入字体图标，然后定位，或者直接用背景图。
CSS3新增选择器：伪元素选择器的更多相关文章
- css3系列之伪元素选择器
Pseudo-Element Selectors(伪元素选择器) E::placeholder E::selection E::placeholder 这个选择器是选啥的呢, 是选 input 里面的 ...
- python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)
一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...
- 前端-CSS-4-伪类选择器&伪元素选择器
1.伪类选择器(爱恨原则) -------------------------------------------------------------------------------------- ...
- css 选择器 & UI元素的伪类选择器 & 伪元素选择器
UI元素的伪类选择器 1. :focus 用来选取获取焦点事件 2. :enabled 用来指定当元素处于可用状态时的样式 3. :disable 用来指定元素处于不可用时的状态 表单里应用 ...
- 前端 CSS的选择器 伪元素选择器
介绍常用的伪元素. after用得比较多的 first-letter 用于为文本的第一个首字母设置样式. <!DOCTYPE html> <html lang="en&qu ...
- CSS3新增的伪类选择器
伪类选择器的作用:对已有选择器做进一步的限制,对已有选择器能匹配的元素做进一步的过滤.CSS 3提供的伪类选择器主要分为以下三类: 结构性伪类选择器 UI元素状态伪类选择器 其他伪类选择器 1.结构性 ...
- python 之 前端开发（基本选择器、组合选择器、 交集与并集选择器、序列选择器、属性选择器、伪类选择器、伪元素选择器）
11.3 css 11.31 基本选择器 11.311 id选择器 根据指定的id名称,在当前界面中找到对应的唯一一个的标签,然后设置属性 <!DOCTYPE html> <html ...
- css伪类选择器及伪元素选择器
1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...
- CSS3新增（选择器{属性选择器，结构伪类选择器，伪元素选择器}）
1.属性选择器 属性选择器,可以根据元素特定的属性来选择元素,这样就不用借助 类 或者 id选择器. E [ att ] 选择具有 att 属性的 E 元素 例如:input [ value ...
- 第91天：CSS3 属性选择器、伪类选择器和伪元素选择器
一.属性选择器 其特点是通过属性来选择元素,具体有以下5种形式: 1.E[attr] 表示存在attr属性即可: div[class] 2.E[attr=val] 表示属性值完全等于val: ...
随机推荐
- nginx安装错误:No package nginx available
出现错误: 1,备份 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup 2.下载新的CentO ...
- 系统开启UAC情形下开机自启动程序如何以管理员权限启动
系统开启UAC情形下开机自启动程序如何以管理员权限启动 题记:本文阐述的是在Windows系统开启UAC的情况下,开机自启动程序需要以管理员权限启动, 系统弹出UAC对话框,用户同意的情形下启动程序 ...
- C#解压、压缩高级用法
压缩:(可以吧要排除的文件去掉) /// <summary> /// 压缩文件夹 /// </summary> /// <param name="folder& ...
- Spring Boot 入门 - 目录
pring Boot 入门 - 进阶篇(3)- 定时任务(@Scheduled) 主要用于定时发送邮件.夜间自动维护等. (1)开启定时任务功能 @Configuration @EnableSched ...
- Flutter Animation AnimatedBuilder
Flutter AnimatedBuilder 创建动画的widget Key key, @required Listenable animation, @required this.builder, ...
- Fortify漏洞之 Log Forging（日志伪造）
继续对Fortify的漏洞进行总结,本篇主要针对 Log Forging(日志伪造)的漏洞进行总结,如下: 1.1.产生原因: 在以下情况下会发生 Log Forging 的漏洞: 1. 数据从一个不 ...
- c#指定长度切割字符串，返回数组
public List<string> subStringByCount(string text, int count) { ;//开始索引 ;//结束索引 double count_va ...
- LeetCode算法01 Valid Parentheses
Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determine if the inpu ...
- 【转】国内CPU现状
首页 博客 学院 下载 图文课 论坛 APP CSDN CSDN学院 问答 商城 VIP会员 ...
- 将Maven项目部署云服务器流程
1.数据库分离,存入项目: 2.将分离出的数据库导入云端服务器 将sql文件上传到服务器中 进去云端数据库输入命令:source 云服务器中sql文件地址 3.设置两种配置,修改匹配: 4.mave ...