# 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. missing required library sqlite.dll最终解决办法

    missing required library sqlite.dll最终解决办法 昨天电脑还是好的,今天早晨打开navicat连接Mysql无缘无故报错"missing required ...

  2. （九）整合 ElasticSearch框架,实现高性能搜索引擎

    整合 ElasticSearch框架,实现高性能搜索引擎 1.SpringBoot整合ElasticSearch 1.1 核心依赖 1.2 配置文件 1.3 实体类配置 1.4 数据交互层 1.5 演 ...

  3. Spark Streaming状态管理函数updateStateByKey和mapWithState

    Spark Streaming状态管理函数updateStateByKey和mapWithState 一.状态管理函数 二.mapWithState 2.1关于mapWithState 2.2mapW ...

  4. Linux-apache httd.conf文件详解

    Linux-apache httd.conf文件详解 # This is the main Apache server configuration file. It contains the # co ...

  5. Rsync同步工具

    1.Rsync介绍 1.1 什么是Rsync? Rsync,remote synchronize顾名思意就知道它是一款实现远程同步功能的软件,它在同步文件的同时,可以保持原来文件的权限.时间.软硬链接 ...

  6. CCF CSP 202009-1 称检查点查询

    202009-1 称检查点查询 题目背景 2020年6月8日,国务院联防联控机制发布<关于加快推进新冠病毒核酸检测的实施意见>,提出对"密切接触者"等八类重点人群&qu ...

  7. Linux下安装MySQL及远程连接MySQL

    安装方式一:通过下载官方安装包安装 由于Linux安装MySQL会遇到各种依赖问题,本博文整理了下安装方放,避免遇到依赖问题 查看是否自带mariadbrpm -qa|grep mariadb然后卸载 ...

  8. vulnhub靶机练习-Os-Hax，详细使用

    Difficulty : Intermediate Flag : boot-root Learing : exploit | web application Security | Privilege ...

  9. 四十五：漏洞发现-API接口服务之漏洞探针类型利用修复

    接口服务类安全测试 根据前期信息收集针对目标端口服务类探针后进行的安全测试,主要涉及攻击方法:口令安全,WEB类漏洞,版本漏洞等,其中产生的危害可大可小,属于端口服务/第三方服务类安全测试.一般在已知 ...

  10. Linux 下mv和cp命令

    注意事项:mv与cp的结果不同,mv好像文件"搬家",文件个数并未增加.而cp对文件进行复制,文件个数增加了. 一.cp命令 cp命令用来将一个或多个源文件或者目录复制到指定的目的 ...