前端 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 ...
随机推荐
- mepg
MPEG(Moving Picture Experts Group,动态图像专家组)
- jenkins插件send files or execute commands over ssh插件parameterized publishing选项使用
1.设置一个参数 2.设置label 3.勾选parameterized publishing
- 【串线篇】spring boot自定义starter
starter: 一.这个场景需要使用到的依赖是什么? 二.如何编写自动配置 启动器只用来做依赖导入:(启动器模块是一个空 JAR 文件,仅提供辅助性依赖管理,这些依赖可能用于自动装配或者其他类库) ...
- node项目实战-用node-koa2-mysql-bootstrap搭建一个前端论坛
前言 在学习了koa2和express并写了一些demo后,打算自己写一个项目练练手,由于是在校生,没什么好的项目做,即以开发一个前端论坛为目标,功能需求参照一下一些社区拟定,主要有: 登录注册 个人 ...
- POJ2942 UVA1364 Knights of the Round Table 圆桌骑士
POJ2942 洛谷UVA1364(博主没有翻墙uva实在是太慢了) 以骑士为结点建立无向图,两个骑士间存在边表示两个骑士可以相邻(用邻接矩阵存图,初始化全为1,读入一对憎恨关系就删去一条边即可),则 ...
- 【leetcode】1144. Decrease Elements To Make Array Zigzag
题目如下: Given an array nums of integers, a move consists of choosing any element and decreasing it by ...
- SQL Server清理索引碎片
DECLARE @SchemeName NVARCHAR(MAX)=N''; DECLARE @TableName NVARCHAR(MAX)=N''; DECLARE @IndexName NVAR ...
- cryto-js 常用加密库 md5加密
安装 npm i crypto-js 使用 import CryptoJs from 'crypto-js' CryptoJs.MD5(password).toString() password 会被 ...
- Linux学习-利用inotify和rsync实现数据的实时同步
一.inotify简介 1.inotify介绍 异步的文件系统事件监控机制,利用事件驱动机制,而无须通过诸如cron等的 轮询机制来获取事件,linux内核从2.6.13起支持 inotify,通过i ...
- 使用vue 3.0 初始化vue脚手架
vue-cli3.0安装 如果你事先已经全局安装了旧版本的vue-cli(1.x 或 2.x),你需要先卸载它: npm uninstall vue-cli -g 安装 npm install -g ...