# css3

.类
:伪类
::伪元素

  1. /*
  2.                 CSS3伪元素/伪类 ：https://www.w3.org/TR/css3-selectors/#selectors
  3.                 ::selection
  4.                     伪元素(F12看不到，::selection 只是给E添加了css样式)
  5.                 ::aftet/:after ?
  6.                     伪元素(F12看到，添加了新结点 ::after 结点)
  7.                 :first-child
  8.                     伪类(.class)(F12看不到,只是给E添加了css样式 或 Jquery的js)
  9. */
  1. /*
  2.                 CSS3伪元素/伪类 ：https://www.w3.org/TR/css3-selectors/#selectors
  3.                 ::selection
  4.                     伪元素(F12看不到，::selection 只是给E添加了css样式)
  5.                 ::aftet/:after ?
  6.                     伪元素(F12看到，添加了新结点 ::after 结点)
  7.                 :first-child
  8.                     伪类(.class)(F12看不到,只是给E添加了css样式 或 Jquery的js)
  9. */

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”，只不过只是在这里插入了一个空格。如下所示：

  1. .clearfix:before,
  2.  
  3. .clearfix:after {
  4.  
  5.        content:””;
  6.  
  7.        display:table;
  8.  
  9. }
  10.  
  11. .clearfix:after {
  12.  
  13.        clear:both;
  14.  
  15.        overflow:hidden;
  16.  
  17. }

上面这个示例是最常见的，也是最简单的，我们再来看一个插入元素属性值的方法。

假设我们有一个元素：

<a href="##" title="我是一个title属性值，我插在你的后面">我是元素</a>

可以通过”:after”和”content:attr(title)”将元素的”title”值插入到元素内容“我是元素”之后：

  1. a:after {
  2.  
  3.   content:attr(title);
  4.  
  5.        color:#f00;
  6.  
  7. }

效果如下：

1

1

1

paperclip 回形针/别针

https://github.com/xgqfrms/js-module/tree/master/plugins/paperclip

  1. /*
  2. 	css: http://liujiacai.net/gooreplacer/
  3. */
  4. header h1:before {
  5.     content: "./ ";
  6.     font-size: 24px;
  7.     color: #0f0;
  8.     background: #fff;
  9. }
  10.  
  11. /*
  12. https://developer.wordpress.org/resource/dashicons/#paperclip
  13.  
  14. paperclip: 回形针/曲别针/报纸夹纸夹/纸夹子 
  15.  
  16. Glyph :浮雕/象形文字 ()PS
  17.  
  18. <span class="dashicons dashicons-paperclip"></span>
  19. */
  20. header h1:after {
  21.     /*content: "回形针/别针icon";*/
  22.     content: "\f546";
  23.     font-size: 24px;
  24. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>paperclip</title>
  6. 	<!-- <link rel="stylesheet" href="dashicons.css"> -->
  7. 	<link rel="stylesheet" href="https://wordpress.org/wp-includes/css/dashicons.css">
  8. 	<link rel="stylesheet" href="paperclip.css">
  9. </head>
  10. <body>
  11. 	<header>
  12. 		<h1>paperclip</h1>
  13. 	</header>
  14. </body>
  15. </html>

1

1

demo:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>E::first-letter && text-transform: capitalize;</title>
  6. 	<!--
  7. 		text-transform: http://www.cnblogs.com/xgqfrms/p/5786191.html
  8. 		E::first-letter: http://www.cnblogs.com/xgqfrms/p/5662310.html
  9. 	-->
  10. 	<style>
  11. 	    html{
  12. 	    	font-size: 16px;
  13. 	    }
  14. 	    a{
  15. 	    	cursor: pointer;
  16. 	    	text-decoration: none;
  17. 	    }
  18. 	    div{
  19. 	    	border: 1px solid rgba(0,0,0,1);
  20. 	    	width: 50%;
  21. 	    	height: auto;
  22. 	    	margin: 0 auto;
  23. 	    }
  24. 	    .box{
  25. 	    	border: none;
  26. 	    	width: auto;
  27. 	    	height: auto;
  28. 	    }
  29. 	 	.d1 h1{
  30. 	 		text-transform: capitalize;
  31. 	 		color: rgba(0,0,0,0.7);
  32. 	 	}
  33. 	 	.d1 h1::first-letter{
  34. 	 		color: rgba(255,100,100,0.7);
  35. 	 	}
  36. 	 	.d2 h1::first-letter{
  37. 	 		color: #0f0;
  38. 	 		font-size: 2em;
  39. 	 	}
  40. 	 	.d3 h1::before{
  41. 	 		content: 'A';
  42. 	 		color: #f00;
  43. 	 		font-size: 3rem;
  44. 	 	}
  45. 	 	.d3 h2::after{
  46. 	 		content: 'B';
  47. 	 		color: #f0f;
  48. 	 		font-size: 1rem;
  49. 	 	}
  50. 	 	.d4 h1::first-line{
  51. 	 		color: #c3c;
  52. 	 	}
  53. 	 	.h1{
  54. 	 		font-size: 2em;
  55. 	 		font-weight: bold;
  56. 	 	}
  57. 	</style>
  58. </head>
  59. <body>
  60. 	<div class="box">
  61. 		<div class="d1">
  62. 			<h1><a href="#" title="text-transform: capitalize;"">text-transform</a></h1>
  63. 			<h1><a href="#" title="text-transform: capitalize;"">text_transform</a></h1>
  64. 			<h1><a href="#" title="text-transform: capitalize;"">text transform</a></h1>
  65. 		</div>
  66. 		<div class="d2">
  67. 			<h1><a href="#" title="E::first-letter"">abc</a></h1>
  68. 			<p class="h1"><a href="#" title="not E::first-letter"">abc</a></p>
  69. 		</div>
  70. 		<div class="d3">
  71. 			<h1><a href="#" title="E::before">*******</a></h1>
  72. 			<h2><a href="#" title="E::after">*******</a></h2>
  73. 		</div>
  74. 		<div class="d4">
  75. 			<h1>
  76. 				<p title="E::first-line">1111111</p>
  77. 				<p title="E::first-line">2222222</p>
  78. 				<p title="E::first-line">3333333</p>
  79. 			</h1>
  80. 		</div>
  81. 		<div class="d5">
  82. 			<h1 title="h1-title">title</h1>
  83. 			<img src="#" alt="image-alt" />
  84. 		</div>
  85. 	</div>
  86. </body>
  87. </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. uni-app开发经验分享十四：小程序超过2M限制的方法——分包加载

      起初小程序上线时,微信限制了代码包不能超过1MB,后来功能变大变成了2M了,限制大小是出于对小程序启动速度的考虑,希望用户在使用任何一款小程序时,都能获得一种"秒开"体验.但是 ...

  2. CSGO项目

    #include <Windows.h> #include <sstream> #include <iostream> #include <math.h> ...

  3. I/O 复用 multiplexing data race 同步 coroutine 协程

    小结: 1.A file descriptor is considered ready if it is possible to perform the corresponding I/O opera ...

  4. 【译】.NET 5. 0 中 Windows Form 的新特性

    自从 Windows Form 在 2018 年底开源并移植到 .NET Core 以来,团队和我们的外部贡献者都在忙于修复旧的漏洞和添加新功能.在这篇文章中,我们将讨论 .NET 5.0 中 Win ...

  5. Jmeter的客户端实现与Keep-Alive

    Jmeter的客户端实现与Keep-Alive 目录 Jmeter的客户端实现与Keep-Alive 0. 结论 1.缘起 1.1 起因 1.2 初步尝试 1.3 Jmeter客户端实现 1.4 Ja ...

  6. JS 实现一个实时动态校验，将输入格式错误的显示为红色背景

    功能描述: 源码: 功能描述: 实时动态校验,如果输入的格式错误,将弹窗提示输入格式错误并将背景展示为红色. 源码: 前台: <hy:formfield name="cxfdl&quo ...

  7. 云服务器镜像问题（"Couldn't resolve host 'mirrors.tencentyun.com'）

    云服务器镜像问题("Couldn't resolve host 'mirrors.tencentyun.com') 原因: 腾讯云服务器内网yum源的域名 mirrors.tencentyu ...

  8. 深入了解JavaScript中基于原型（prototype）的继承机制

    原型 前言 继承是面向对象编程中相当重要的一个概念,它对帮助代码复用起到了很大的作用. 正文 Brendan Eich在创建JavaScript时,没有选择当时最流行的类继承机制,而是借鉴Self,用 ...

  9. OsgEarth开发笔记（一）：Osg3.6.3+OsgEarth3.1+vs2019x64开发环境搭建(上)

    前言   OSG研究之后,做地理GIS显示了地球:<项目实战:Qt+OSG教育学科工具之地理三维星球>,这一文章是基于OSG做的,而基于OsgEarth是可以进一步对地球进行深度操作,所以 ...

  10. 找新朋友 HDU - 1286 欧拉函数模板题

    题意: 求出来区间[1,n]内与n互质的数的数量 题解: 典型的欧拉函数应用,具体见这里:Relatives POJ - 2407 欧拉函数 代码: 1 #include<stdio.h> ...