CSS中的伪元素选择器
定义
伪元素选择器:就是有连续两个冒号的选择器,如::first-line::first- letter、::before 和::after
- E::first-letter文本的第一个单词或字(如中文、日文、 韩文等)
- E::first-line 文本第一行;
- E::selection 可改变选中文本的样式;
- E::before和E::after
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪元素选择器</title>
<style type="text/css">
p::first-letter { /* 选择第一个字 */
color: red;
font-size: 25px;
} p::first-line { /* 选择第一行 */
color: green;
font-size: 20px;
} p::selection { /* 选中变色 */
color: blue;
} div:before { /* 放在盒子内部的前面 */
content:"一只";
}
div:after { /* 放在盒子内部的后面插入 */
content:"猪";
}
</style>
</head>
<body>
<h1>静夜思</h1>
<p>床前明月光,疑是地上霜。举头望明月,低头思故乡</p>
<div>特立独行的</div>
</body>
</html>
实现效果
CSS中的伪元素选择器的更多相关文章
- CSS中模拟父元素选择器
很多情况下,我们需要找到父元素,但可惜的是css中并没有这样的一个选择器. 至于原因可以看张鑫旭的如何在CSS中实现父选择器效果这篇文章. 简单来说这个实现并不是真正的父元素选择器,只是利用其它思路来 ...
- 理解 CSS 中的伪元素 :before 和 :after
CSS 的主要目的是给 HTML 元素添加样式,然而,在一些案例中给文档添加额外的元素是多余的或是不可能的.事实上 CSS 中有一个特性允许我们添加额外元素而不扰乱文档本身,这就是“伪元素”. 你一定 ...
- css中的伪元素,我今天记住了!o~yeah
对于伪类和伪元素,我如果要区别它们,一般是使用css中的手册来区分,平常时候也没特意去记,需要用到时打开手册“哦,这个是伪元素,这个是伪类”,我个人觉的某些东西你把它存在网上,不一定要存在头脑中.带着 ...
- css 中的伪类选择器before 与after
.cf:after,.cf:before {content: " "; display: table;} .cf:after {clear: both;} :before是因为ta ...
- CSS_03_04_CSS伪元素选择器
第01步:编写css代码:wei.css @charset "utf-8"; /* 伪元素选择器 :状态 效果顺序:L V H A */ a:link.lin_01{/*超链接,未 ...
- css伪类选择器及伪元素选择器
1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...
- css伪元素选择器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 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 ...
随机推荐
- 610K图纸打印新版增值税发票不完整的调整方法 黑盘红盘都兼容
新版增票页面设置增票向下0.8向右-10,5刻度进纸测试 向右调整可能会有些出入 根据情况微调即可. 下面为黑盘的设置 可与上面兼容
- 企业级监控软件Zabbix搭建部署之zabbix在WEB页面中的配置
企业级监控软件zabbix搭建部署之zabbix在WEB页面中的配置 企业级监控软件zabbix搭建部署之zabbix在WEB页面中的配置 关于安装请看 http://www.linuxidc.com ...
- python NameError: name 'file' is not defined
import sys import time import os poem='''\ 测试读写文件 ''' print(os.getcwd()) f=file(os.getcwd()+'/python ...
- frugally-deep: Header-only library for using Keras models in C++
// Convenience wrapper around predict for models with // single tensor outputs of shape (1, 1, 1), / ...
- php array_splice()函数 语法
php array_splice()函数 语法 作用:从数组中移除选定的元素,并用新元素取代它.dd马达价格 语法:array_splice(array,start,length,array) 参数: ...
- 向量积&&凸包算法
参考:Thanks 百度百科 http://blog.csdn.net/keng_s/article/details/52131034 https://www.cnblogs.com/aiguona/ ...
- 【HDOJ6687】Rikka with Stable Marriage(Trie树,贪心)
题意:给定两个长均为n的序列a和b,要求两两配对,a[i]和b[j]配对的值为a[i]^b[j],求配对后的值之和的最大值 n<=1e5,a[i],b[i]<=1e9 思路:和字典序最大的 ...
- MongoDB性能分析
# mongostat --host=100.150.2.12 --port=27017 --authenticationDatabase=admin --username=root --passwo ...
- Java连接MySql数据库之JDBC
1.首先创建一个java Project项目 2.起一个英文的项目名 3.此窗口点击NO 4.此时项目状态如下 5.创建一个文件夹,并将mysql-connector-java-5.1.8-bin.j ...
- elasticsearch 5.1 认证过期 (your license has expired)
首先说一下License过期后的状况: if 设置了登录认证,license过期后将无法登录(无法填入用户名密码,下方给出报错,license过期): if 没有设置登录认证,打开kibaba界面中M ...