CSS3 动态生成内容(在Web中插入内容)====CSS的伪类或者伪元素
# css3
.类
:伪类
::伪元素/*
CSS3伪元素/伪类 :https://www.w3.org/TR/css3-selectors/#selectors
::selection
伪元素(F12看不到,::selection 只是给E添加了css样式)
::aftet/:after ?
伪元素(F12看到,添加了新结点 ::after 结点)
:first-child
伪类(.class)(F12看不到,只是给E添加了css样式 或 Jquery的js)
*//*
CSS3伪元素/伪类 :https://www.w3.org/TR/css3-selectors/#selectors
::selection
伪元素(F12看不到,::selection 只是给E添加了css样式)
::aftet/:after ?
伪元素(F12看到,添加了新结点 ::after 结点)
:first-child
伪类(.class)(F12看不到,只是给E添加了css样式 或 Jquery的js)
*/
1
1
1
1
1
1
在Web中插入内容,在CSS2.1时代依靠的是JavaScript来实现。但进入CSS3进代之后我们可以通 过CSS3的伪类“:before”,“:after”和CSS3的伪元素“::before”、“::after”来实现,其关键是依靠CSS3中的 “content”属性来实现。不过这个属性对于img和input元素不起作用。
content配合CSS的伪类或者伪元素,一般可以做以下四件事情:
功能 |
功能说明 |
none |
不生成任何内容 |
attr |
插入标签属性值 |
url |
使用指定的绝对或相对地址插入一个外部资源(图像,声频,视频或浏览器支持的其他任何资源) |
string |
插入字符串 |
实例展示:
在CSS中有一种清除浮动的方法叫“clearfix”。而这个“clearfix”方法就中就使用了“content”,只不过只是在这里插入了一个空格。如下所示:
.clearfix:before, .clearfix:after { content:””; display:table; } .clearfix:after { clear:both; overflow:hidden; }
上面这个示例是最常见的,也是最简单的,我们再来看一个插入元素属性值的方法。
假设我们有一个元素:
<a href="##" title="我是一个title属性值,我插在你的后面">我是元素</a>
可以通过”:after”和”content:attr(title)”将元素的”title”值插入到元素内容“我是元素”之后:
a:after { content:attr(title); color:#f00; }
效果如下:
1
1
1
paperclip 回形针/别针
https://github.com/xgqfrms/js-module/tree/master/plugins/paperclip
/*
css: http://liujiacai.net/gooreplacer/
*/
header h1:before {
content: "./ ";
font-size: 24px;
color: #0f0;
background: #fff;
} /*
https://developer.wordpress.org/resource/dashicons/#paperclip paperclip: 回形针/曲别针/报纸夹纸夹/纸夹子 Glyph :浮雕/象形文字 ()PS <span class="dashicons dashicons-paperclip"></span>
*/
header h1:after {
/*content: "回形针/别针icon";*/
content: "\f546";
font-size: 24px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>paperclip</title>
<!-- <link rel="stylesheet" href="dashicons.css"> -->
<link rel="stylesheet" href="https://wordpress.org/wp-includes/css/dashicons.css">
<link rel="stylesheet" href="paperclip.css">
</head>
<body>
<header>
<h1>paperclip</h1>
</header>
</body>
</html>
1
1
demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>E::first-letter && text-transform: capitalize;</title>
<!--
text-transform: http://www.cnblogs.com/xgqfrms/p/5786191.html
E::first-letter: http://www.cnblogs.com/xgqfrms/p/5662310.html
-->
<style>
html{
font-size: 16px;
}
a{
cursor: pointer;
text-decoration: none;
}
div{
border: 1px solid rgba(0,0,0,1);
width: 50%;
height: auto;
margin: 0 auto;
}
.box{
border: none;
width: auto;
height: auto;
}
.d1 h1{
text-transform: capitalize;
color: rgba(0,0,0,0.7);
}
.d1 h1::first-letter{
color: rgba(255,100,100,0.7);
}
.d2 h1::first-letter{
color: #0f0;
font-size: 2em;
}
.d3 h1::before{
content: 'A';
color: #f00;
font-size: 3rem;
}
.d3 h2::after{
content: 'B';
color: #f0f;
font-size: 1rem;
}
.d4 h1::first-line{
color: #c3c;
}
.h1{
font-size: 2em;
font-weight: bold;
}
</style>
</head>
<body>
<div class="box">
<div class="d1">
<h1><a href="#" title="text-transform: capitalize;"">text-transform</a></h1>
<h1><a href="#" title="text-transform: capitalize;"">text_transform</a></h1>
<h1><a href="#" title="text-transform: capitalize;"">text transform</a></h1>
</div>
<div class="d2">
<h1><a href="#" title="E::first-letter"">abc</a></h1>
<p class="h1"><a href="#" title="not E::first-letter"">abc</a></p>
</div>
<div class="d3">
<h1><a href="#" title="E::before">*******</a></h1>
<h2><a href="#" title="E::after">*******</a></h2>
</div>
<div class="d4">
<h1>
<p title="E::first-line">1111111</p>
<p title="E::first-line">2222222</p>
<p title="E::first-line">3333333</p>
</h1>
</div>
<div class="d5">
<h1 title="h1-title">title</h1>
<img src="#" alt="image-alt" />
</div>
</div>
</body>
</html>
1
1
1
1
1
1
1
1
1
1
1
CSS3 动态生成内容(在Web中插入内容)====CSS的伪类或者伪元素的更多相关文章
- VSTO 向office文档中插入内容
原文:VSTO 向office文档中插入内容 Word: Word.Selection sec = ThisAddIn.appWord.Selection; sec.Insert ...
- 向ueditor中插入内容
html在ueditor中插入内容不能直接插入,必须判断编辑器是否创建成功,jsp可以用java代码嵌套的方式. html页面中:<textarea id="zym" nam ...
- bootstrap如何去除自带的样式----导航栏中的菜单实现平滑的过渡到对应的菜单区域-------动态跟换模态框中的内容
问题1:如何去除bootstap中css中自带的overflow:hidden这个样式 今天遇见在bootstap中轮播图上的 附带图 片不能够显示出来,图片始终有一部分的高度 被隐藏了 后来通 ...
- ::before ::after CSS3中的伪类和伪元素
::before和::after伪元素的用法 一.介绍 css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类——:hover,:link,:active,:target,:not(),:fo ...
- 妙味css3课程---1-2、css3中新增的伪类和伪元素有哪些
妙味css3课程---1-2.css3中新增的伪类和伪元素有哪些 一.总结 一句话总结: 1.div:target{}是什么意思? 比如a标签的锚点链接到div,div:target{}就可以找到这个 ...
- css3的伪(伪类和伪元素)大合集
本文讲css3的伪,不是讲它有多虚伪,而是说它的伪元素样式.不得不说以前虽知html伪元素,但很少用,后得知借助css3伪元素可以发挥极大的便利.故总结css3的伪如下: CSS中存在一些比较特殊的属 ...
- 关于css中伪类及伪元素的总结
css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有"段落 ...
- 【从0到1学Web前端】CSS伪类和伪元素
1.CSS中的伪类 CSS 伪类用于向某些选择器加入特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...
- 【从0到1学Web前端】CSS伪类和伪元素 分类: HTML+CSS 2015-06-02 22:29 1065人阅读 评论(0) 收藏
1.CSS中的伪类 CSS 伪类用于向某些选择器添加特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...
随机推荐
- 配接Cisco设备
- ubuntu 14.04下安装 mysql-workbench
直接在命令行下运行下面命令: sudo apt-get install mysql-workbench 安装完,都可以在Dash中找到 "mysql" 就点击应用打开. 在data ...
- OpenSSL 常见对称加密算法特性分析
在选择加密算法,面对一大长串的选项时,大家都有这样的疑问,究竟哪种加密方式是最好的呢? 对于加密方式.算法来说,一般安全性与性能呈负相关,越是安全的,对性能要求则更高. 现在主流的加密协议的安全性均能 ...
- WPF Selector、SelectIndex、SelectedValue、SelectedValuePath、SelectedItem这几兄弟你分的清楚嘛?
Selector Selector是一个抽象类,继承ItemsControl类(包含任何类型的对象(例如字符串,图像或面板)的集合),而本文的4个兄弟都是Selector类下的4个属性. Select ...
- 20201101gryz模拟赛解题报告
写在前面 2020rp++ 停课的第一场模拟赛 拿上一年的上一年的day1来考的, 结果得分期望220pts,实际135pts,rank3,太菜了 考着考着机房灯突然灭了,当时慌的一批 以为断电代码要 ...
- Session.invalidate与sessiont.removeAtribute()学习比较
当浏览器第一次请求时,服务器创建一个session对象,同时生成一个sessionId,并在此次响应中将sessionId 以响应报文的方式传回客户端浏览器内存或以重写url方式送回客户端,来保持整个 ...
- Mybatis(二)实例练习
文章目录 实例练习Mybatis,实现一个简单的登录功能. 增.删.改:操作返回Int类型. 查询操作返回实体对象. 首先需要导入相关的包. #导包: #建表 在数据库中新建一个用户mybatis,然 ...
- eclipse下执行maprdeuc程序报错 java.lang.ClassNotFoundException
最近遇到一个问题,不知怎么突然运行hadoop的map程序报错,困扰了我很久,现在来给大家分享分享.. 错误信息 2017-05-18 21:34:22,104 INFO [main] client. ...
- Filter过滤器除去部分URL链接
在web.xml中配置的Filter如下: <filter> <filter-name>HazardousParametersFilter</filter-name> ...
- 【BFS】hdu 1973 Prime Path
题目描述: http://poj.org/problem?id=3414 中文大意: 使用两个锅,盛取定量水. 两个锅的容量和目标水量由用户输入. 允许的操作有:灌满锅.倒光锅内的水.一个锅中的水倒入 ...