# 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)

*/

http://www.cnblogs.com/xgqfrms/p/5662310.html

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的伪类或者伪元素的更多相关文章

  1. VSTO 向office文档中插入内容

    原文:VSTO 向office文档中插入内容 Word: Word.Selection sec = ThisAddIn.appWord.Selection;            sec.Insert ...

  2. 向ueditor中插入内容

    html在ueditor中插入内容不能直接插入,必须判断编辑器是否创建成功,jsp可以用java代码嵌套的方式. html页面中:<textarea id="zym" nam ...

  3. bootstrap如何去除自带的样式----导航栏中的菜单实现平滑的过渡到对应的菜单区域-------动态跟换模态框中的内容

    问题1:如何去除bootstap中css中自带的overflow:hidden这个样式 今天遇见在bootstap中轮播图上的  附带图  片不能够显示出来,图片始终有一部分的高度  被隐藏了 后来通 ...

  4. ::before ::after CSS3中的伪类和伪元素

    ::before和::after伪元素的用法 一.介绍 css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类——:hover,:link,:active,:target,:not(),:fo ...

  5. 妙味css3课程---1-2、css3中新增的伪类和伪元素有哪些

    妙味css3课程---1-2.css3中新增的伪类和伪元素有哪些 一.总结 一句话总结: 1.div:target{}是什么意思? 比如a标签的锚点链接到div,div:target{}就可以找到这个 ...

  6. css3的伪（伪类和伪元素）大合集

    本文讲css3的伪,不是讲它有多虚伪,而是说它的伪元素样式.不得不说以前虽知html伪元素,但很少用,后得知借助css3伪元素可以发挥极大的便利.故总结css3的伪如下: CSS中存在一些比较特殊的属 ...

  7. 关于css中伪类及伪元素的总结

    css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有"段落 ...

  8. 【从0到1学Web前端】CSS伪类和伪元素

    1.CSS中的伪类 CSS 伪类用于向某些选择器加入特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...

  9. 【从0到1学Web前端】CSS伪类和伪元素 分类： HTML+CSS 2015-06-02 22:29 1065人阅读 评论(0) 收藏

    1.CSS中的伪类 CSS 伪类用于向某些选择器添加特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...

随机推荐

  1. centos7防火墙firewalld拒绝某ip或者某ip段访问服务器任何服务

    安装firewall后(LINUX7系统一般情况下默认已安装),防火墙默认配置是只打开SSH端口的,也就是22端口,如果SSH的端口已更改成别的端口了,请切记一定在启动firewall前先修改对应服务 ...

  2. 使用Jmeter对SHA1加密接口进行性能测试

    性能测试过程中,有时候会遇到需要对信息头进行加密鉴权,下面我就来介绍如何针对SHA1加密鉴权开发性能测试脚本1.首先了解原理,就是需要对如下三个参数进行SHA1加密,(AppSecret + Nonc ...

  3. fiddler安装以及使用说明

    一.fiddler fiddler是一个抓包工具,通过使用它抓包我们可以很清晰的看到抓的内容的协议,URL,参数等. 1.安装 在普通下载网站找到安装包,直接安装,点击下一步即可. 二.使用 1.se ...

  4. 服务发现 ap cp 强一致性 最终一致性 dns vip ip

    为什么基于域名 08 | 服务发现:到底是要CP还是AP? https://time.geekbang.org/column/article/208171 为什么需要服务发现?先举个例子,假如你要给一 ...

  5. GDB查看内存命令（x命令） 用gdb查看指定地址的内存内容

    GDB查看内存命令(x命令) - super119 - 博客园 https://www.cnblogs.com/super119/archive/2011/11/18/2254382.html 可以使 ...

  6. django 请求处理流程 链路追踪

    class BaseMiddleware: # https://github.com/django/django/blob/master/tests/utils_tests/test_decorato ...

  7. wireshark使用手册

    Wireshark的过滤器 使用Wireshark时最常见的问题,是当您使用默认设置时,会得到大量冗余信息,以至于很难找到自己需要的部分. 过犹不及. 这就是为什么过滤器会如此重要.它们可以帮助我们在 ...

  8. Python学习【第8篇】：python中的函数

    1.python中函数定义方法 def test(x): "This istest" y = x*2+1 return y vaule = test(2)print(vaule)运 ...

  9. React中组件间通信的方式

    React中组件间通信的方式 React中组件间通信包括父子组件.兄弟组件.隔代组件.非嵌套组件之间通信. Props props适用于父子组件的通信,props以单向数据流的形式可以很好的完成父子组 ...

  10. Dbeaver 连接 phoenix

    Dbeaver 连接 phoenix 1.新建连接 2.选择连接类型Phoenix 3.设置驱动 4.准备驱动包 5.添加驱动 6.添加 Zookeeper Base Path 7.找到驱动类 8.配 ...