css---6伪元素选择器
after :在内容后边
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>after</title>
<style type="text/css">
div {
width: 300px;
height: 100px;
border: 1px solid #;
}
div::after {
content: "我在内容的后面";
}
</style>
</head>
<body>
<div>伪元素fgdddddddddddddddddddddddddddddd</div>
</body>
</html>
content after
before 在内容的前面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>before</title>
<style type="text/css">
div {
width: 300px;
height: 100px;
border: 1px solid #;
}
div::before {
content: "我在内容的前面";
}
</style>
</head>
<body>
<div>伪元素</div>
</body>
</html>
content before
First-Lette 第一个字母
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First-Letter</title>
<style type="text/css">
div {
width: 500px;
margin: auto;
font-size: 12px;
}
div::first-letter {
color: #f00;
font-size: 24px;
font-weight: bold;
}
</style>
</head>
<body>
<div>sssss</div>
</body>
</html>
First-Line 全部一行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First-Line</title>
<style type="text/css">
div {
width: 500px;
margin: auto;
}
div::first-line {
color: #f00;
font-weight: bold;
}
</style>
</head>
<body>
<div>
sssss<br>
sssss<br>
sssss<br>
</div>
</body>
</html>
first Line
::selection 选择颜色会变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Selection</title>
<style type="text/css">
div::selection {
background: red;
color: pink;
}
</style>
</head>
<body>
<div>SelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelection</div>
</body>
</html>
css---6伪元素选择器的更多相关文章
- HTML&CSS基础-伪元素选择器
HTML&CSS基础-伪元素选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> ...
- css伪类选择器及伪元素选择器
1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...
- css伪元素选择器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- CSS伪类选择器和伪元素选择器
CSS的伪类选择器常用的是link/visited/hover/active,分别对应未访问.已访问过.鼠标悬停.鼠标按下时的样式,常用于链接,使用时要按此顺序依次写CSS,不能乱 a:link{ba ...
- CSS中伪类选择器及伪元素
1.伪类选择器 在CSS中,最常用的伪类选择器是使用在a(锚)元素上的几种选择器,它们的使用方法如下: a:link{color:#FF0000;text-decoration:none} a:vis ...
- css选择器(常规选择器，伪类选择器，伪元素选择器，根元素选择器)
前言 CSS的一个核心特性是能向文档中的一组元素类型应用某些规则,本文将详细介绍CSS选择器 选择器 [通配选择器] 星号*代表通配选择器,可以与任何元素匹配 *{color: red;} [元素选择 ...
- python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)
一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...
- CSS样式表及选择器相关内容(二)-伪类与伪元素选择器
伪类与伪元素选择器归纳: 一.伪类选择器(伪类以":"开头,用在选择器后,用于指明元素在某种特殊的状态下才能被选中) 1.a标签伪类选择器,其他标签类似 eg: ...
- 前端 CSS的选择器 伪元素选择器
介绍常用的伪元素. after用得比较多的 first-letter 用于为文本的第一个首字母设置样式. <!DOCTYPE html> <html lang="en&qu ...
- CSS中的伪元素选择器
定义 伪元素选择器:就是有连续两个冒号的选择器,如::first-line::first- letter.::before 和::after E::first-letter文本的第一个单词或字(如中文 ...
随机推荐
- 3-vim-打开和新建文件-02-删除交换文件
vim的异常处理 如果vim异常退出,在磁盘上可能会保存有交换文件. 若使用vi编辑该文件时看到如下图信息,按下字母d就可以删除交换文件. 注意:输入命令操作的时候关闭输入法.
- USACO2012 Moo /// 模拟 oj21548
大致题意: 递归地描述序列:设S(0)为3个字符的序列“mo o”.然后在较长的序列小号(ķ)通过取序列的拷贝获得小号(ķ -1),则“摩... O”与ķ 2 O公司,然后该序列的另一个拷贝小号(ķ ...
- 8u ftp 可以连接但是无法获取目录的解决办法：无法打开传输通道。原因：由于...
来自: http://www.3566t.com/news/dlsn/1557906.html 状态: 正在取得目录列表... 命令: CWD xinghun 响应: 250 OK. Curre ...
- keepAlived主备及双主
nginx用默认配置即可 1.主备配置 1.主keepAlived配置 vrrp_instance VI_1 { state MASTER #主备区分 interface eth0 virtual_r ...
- JS window对象取消计时器clearInterval() clearInterval() 方法可取消由 setInterval() 设置的交互时间。
取消计时器clearInterval() clearInterval() 方法可取消由 setInterval() 设置的交互时间. 语法: clearInterval(id_of_setInterv ...
- js怎样判断一个数是质数
1.首先了解什么是质数(即:只能被1和它本身整除的数叫质数)主要代码 /** *判断该数是否为素数 */ function isPrimeNum(num){ ; i < num/+; i++) ...
- 60 cuda全局性能优化
0 引言 cuda线程模型涉及grid的块划分和线程配置,直接影响到全局运算速度.根据文档<CUDA_C_Programming_Guide>,性能优化有三个方面的基本策略. (1)最大化 ...
- cdq分治·三维偏序问题
转载自FlashHu大佬的博客CDQ分治总结(CDQ,树状数组,归并排序),在讲述部分有部分删改,用了自己的代码 CDQ分治的思想 CDQ分治是基于时间的离线分治算法.这一类分治有一个重要的思想——用 ...
- HDU5669
目录 Catalog Solution: (有任何问题欢迎留言或私聊 && 欢迎交流讨论哦 Catalog Problem:传送门 Portal 原题目描述在最下面. 给你n个点 ...
- GO语言range的用法 (2013-08-09 14:08:26)
range是go语言系统定义的一个函数. 函数的含义是在一个数组中遍历每一个值,返回该值的下标值和此处的实际值. 假如说a[0]=10,则遍历到a[0]的时候返回值为0,10两个值. 下面是一个例子: ...