前端 CSS的选择器 伪元素选择器
介绍常用的伪元素。
after用得比较多的
first-letter
用于为文本的第一个首字母设置样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<style type="text/css"> /* 设置第一个首字母的样式*/
p:first-letter{
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<div>
<p>我是一个段落</p>
</div>
</body>
</html>
before
用于在元素的内容前面插入新内容
使用此伪元素选择器一定要结合content属性
在每个<p>元素之前插入内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<style type="text/css"> /* 用于在元素的内容前面插入新内容*/
p:before{
content: 'mike';
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<div>
<p>我是一个段落</p>
</div>
</body>
</html>
after
用在网页布局比较多，清除浮动
用于在元素的内容后面插入新内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<style type="text/css"> /* 用于在元素的内容后面插入新内容*/
p:after{
content: '&';
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<div>
<p>我是一个段落</p>
</div>
</body>
</html>
在每个<p>元素之后插入内容
前端 CSS的选择器 伪元素选择器的更多相关文章
- python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)
一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...
- 前端-CSS-4-伪类选择器&伪元素选择器
1.伪类选择器(爱恨原则) -------------------------------------------------------------------------------------- ...
- CSS中的伪元素选择器
定义 伪元素选择器:就是有连续两个冒号的选择器,如::first-line::first- letter.::before 和::after E::first-letter文本的第一个单词或字(如中文 ...
- css 选择器 & UI元素的伪类选择器 & 伪元素选择器
UI元素的伪类选择器 1. :focus 用来选取获取焦点事件 2. :enabled 用来指定当元素处于可用状态时的样式 3. :disable 用来指定元素处于不可用时的状态 表单里应用 ...
- css伪类选择器及伪元素选择器
1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...
- python 之 前端开发（基本选择器、组合选择器、 交集与并集选择器、序列选择器、属性选择器、伪类选择器、伪元素选择器）
11.3 css 11.31 基本选择器 11.311 id选择器 根据指定的id名称,在当前界面中找到对应的唯一一个的标签,然后设置属性 <!DOCTYPE html> <html ...
- CSS_03_04_CSS伪元素选择器
第01步:编写css代码:wei.css @charset "utf-8"; /* 伪元素选择器 :状态 效果顺序:L V H A */ a:link.lin_01{/*超链接,未 ...
- css伪元素选择器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- CSS伪类选择器和伪元素选择器
CSS的伪类选择器常用的是link/visited/hover/active,分别对应未访问.已访问过.鼠标悬停.鼠标按下时的样式,常用于链接,使用时要按此顺序依次写CSS,不能乱 a:link{ba ...
随机推荐
- Effective C++条款05：了解C++默默编写并调用哪些函数
class Empty{}; class Empty{ Empty(){}; Empty(const Empty& rhs){}; ~Empty(){}; Empty& operato ...
- Python核心技术与实战——十|面向对象的案例分析
今天通过面向对象来对照一个案例分析一下,主要模拟敏捷开发过程中的迭代开发流程,巩固面向对象的程序设计思想. 我们从一个最简单的搜索做起,一步步的对其进行优化,首先我们要知道一个搜索引擎的构造:搜索器. ...
- linux局域网通过映射（双网卡）访问外网
图示说明: 1.IP规划设置 主机名 ip地址 ip地址(第二个网卡配置的地址) 地址类别 oldboy01 192.168.10.20 空 仅可访问内网主机 oldboy02 192.168.10. ...
- Node.js企业开发:应用场景
要想用Node.js首先需要知道它到底是什么, 有哪些优缺点. 然后我们才能知道到底 Node.js 适合哪些应用场景. Node.js 维基百科:“Node.js 是谷歌 V8 引擎.libuv平台 ...
- 【C】题解 （五校联考3day2）
分析 这道题看上去很恶心,实际上只用记录四坨东西就能打DP了:y坐标最小的向上射的点.y坐标最大的向下射的点.y坐标最大和最小的向右射的点,转移显然.注意,如果该状态的值为零就可以略过,否则会超时. ...
- 在mac上安装rabbitmq
在 OS X 上安装 RabbitMQ¶ 在 Snow Leopard 上安装 RabbitMQ 最简单的方式就是 Homebrew ——OS X 上的一款新颖别致,光彩动人的包管理系统. 在本例中, ...
- POST接口测试的请求方式
一.基础知识 1.HTTP的八种请求方法:GET, POST ,HEAD,OPTIONS, PUT, DELETE, TRACE 和 CONNECT 方法. GET请求:请求指定的页面信息,并返回实体 ...
- php中如何上传整个文件夹里的所有文件?
1.使用PHP的创始人 Rasmus Lerdorf 写的APC扩展模块来实现(http://pecl.php.net/package/apc) APC实现方法: 安装APC,参照官方文档安装,可以使 ...
- win php composer安装
composer安装文件下载 https://getcomposer.org/Composer-Setup.exe composer安装: 选择php.exe D:\phpStudy\php55n\p ...
- android读取xml
/*** 从config.xml中获取版本信息以及应用id* * @param urlPath* @return* @throws Exception*/public List getUpdateIn ...