伪元素选择器(隐形的翅膀 选择器)

伪元素选择器:(虚假的元素,一对隐形的翅膀)
A 重点:E::before/ E::after
    1- 是一个行内元素,如果想设置宽高则需要转换成块:
    display:block    float:*        position:
    2- 必须添加content,哪怕不设置内容,也需要content:""
    3- E:after/E:before 在旧版本里是伪元素,新版本下E:after、E:before会被自动识别为
    E::before/E::after,按伪元素来对待,这样做的目的是用来做兼容。
    4- E::before 定义在一个元素的内容之前插入content属性定义的内容与样式。
    5- E:after 定义在一个元素的内容之后,插入content舒心定义的内容与样式。
    注意:IE6,7,8不支持
    

B- E::first-letter 文本汇总第一个字母或字(不是词组)
C- E::first-lint 文本第一行
D- E::selection 可改变选中文本的样式。

1、伪元素::before/::after 完全等价于一个dom元素。
2、它不会在dom树中生成。但是效果是有的。
    每个dom元素中,都有一对隐形的子元素。可以把它当dom元素使用。

====================================================================

E::before   E::after伪类选择器的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪元素选择器</title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			body{
				width: 400px;
				padding: 200px;
			}
			div:nth-of-type(1){
				width: 300px;
				height: 200px;
				background-color: red;
				float: left;
			}
			div:nth-of-type(2){
				width: 100px;
				height: 200px;
				background-color: yellow;
				float: right;
				position: relative;
			}
			
			div:nth-of-type(2)::before{
				/* 1.必须添加content属性,否则后期不可见 */
				content:"";
				/* 2.默认是行级元素,如果想设置宽高,就必须转换为块级元素属性 */
				position:absolute;
				width:20px;
				height: 20px;
				background-color: #fff;
				border-radius: 10px;
				left: -10px;
				top: -10px;
			}
			div:nth-of-type(2)::after{
				/* 1.必须添加content属性,否则后期不可见 */
				content:"";
				/* 2.默认是行级元素,如果想设置宽高,就必须转换为块级元素属性 */
				position:absolute;
				width:20px;
				height: 20px;
				background-color: #fff;
				border-radius: 10px;
				left: -10px;
				bottom: -10px;
			}
		</style>
	<body>
		<div></div>
		<div></div>
	</body>
</html>

=========================================

其他伪元素的是使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>其他伪元素的是使用</title>
		<style type="text/css">
			/* 获取第一个字符:通过伪元素first-letter,实现首字下沉 */
			p::first-letter {
				color: #0000FF;
				font-size: 30px;
				float: left;
				/* 文本环绕*/
			}

			/* 获取第一行内容:如果设置了first-letter,那么无法同时设置它的样式 */
			p::first-line {
				color: #FF00FF;
				text-decoration: underline;
			}
			/* 设置当前选中内容的样式, 同样如果设置了first-letter,无法设置样式。
			 它只能改变显示的样式,而不能设置内容大小。 */
			p::selection {
				background-color: #8B0000;
			}
		</style>
	</head>
	<body>
		<p>内蒙古生态状况如何,不仅关系全区各族群众生存和发展<br>而且关系华北、东北、西北乃至全国生态安全。把内蒙古建成我国北方重要生态安全屏障。必须以更大的决心、付出更为艰巨的努力。</p>
	</body>
</html>

猜你喜欢

转载自blog.csdn.net/xqiitan/article/details/88246318