CSS3 新增选择器 E::before和E::after（重点）

最新推荐文章于 2021-04-08 12:15:25 发布

weixin_43312083

最新推荐文章于 2021-04-08 12:15:25 发布

阅读量305

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43312083/article/details/100161778

版权

前端专栏收录该内容

85 篇文章 5 订阅

订阅专栏

结构(位置)伪类选择器（CSS3)

:first-child :选取属于其父元素的首个子元素的指定选择器
:last-child :选取属于其父元素的最后一个子元素的指定选择器
:nth-child(n) ：匹配属于其父元素的第 N 个子元素，不论元素的类型

:nth-child(even) 所有的偶数 :nth-child(odd) 所有的奇数 :nth-child(2n) 所有的偶数

li:first-child { /*  选择第一个孩子 */
        		color: pink; 
        	}
li:last-child {   /* 最后一个孩子 */
        		color: purple;
        	}
li:nth-child(4) {   /* 选择第4个孩子  n  代表 第几个的意思 */ 
				color: skyblue;
        	}

属性选择器

div[class^=font] { /*  class^=font 表示 以字母组合font 开头就选出来了 */
			color: pink;
		}
div[class$=footer] { /*  class$=footer 表示 以footer 结束就选出来了 */
			color: skyblue;
		}
div[class*=tao] { /* class*=tao  *=  表示tao在任意位置都可以被选出来 */
			color: green;
		}

    <div class="font12">属性选择器</div>
    <div class="font12">属性选择器</div>
    <div class="font24">属性选择器</div>
    <div class="font24">属性选择器</div>
    <div class="font24">属性选择器</div>
    <div class="24font">属性选择器123</div>
    <div class="sub-footer">属性选择器footer</div>
    <div class="jd-footer">属性选择器footer</div>
    <div class="news-tao-nav">属性选择器</div>
    <div class="news-tao-header">属性选择器</div>
    <div class="tao-header">属性选择器</div>

伪元素选择器（CSS3)

E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
E::first-line 文本第一行；
E::selection 可以改变选中的文本的样式；

p::first-letter {
  font-size: 20px;
  color: hotpink;
}

/* 首行特殊样式 */
p::first-line {
  color: skyblue;
}

p::selection {
  /* font-size: 50px; */
  color: orange;
}

4、E::before和E::after（重点）

div::befor { content:"开始"; } div::after { content:"结束"; }

after和before伪元素基本案例：重点在注释部分结果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	div::before {  /*必须带一个属性：content */  /*说是伪元素 其实这个 before 是个盒子*/
		/* 这个盒子是行内的盒子  可以转换*/
		content: "我";
		/*width: 200px;
		height: 200px;
		background-color: pink;
		display: block;*/
	}
	div::after {
		content: "18岁";
	}
	</style>
</head>
<body>
	<div>今年</div>
</body>
</html>

结果显示：

案例二：用伪元素来制作图标字体

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		@font-face {
	  font-family: 'icomoon';
	  src:  url('fonts/icomoon.eot?hrstq9');
	  src:  url('fonts/icomoon.eot?hrstq9#iefix') format('embedded-opentype'),
	    url('fonts/icomoon.ttf?hrstq9') format('truetype'),
	    url('fonts/icomoon.woff?hrstq9') format('woff'),
	    url('fonts/icomoon.svg?hrstq9#icomoon') format('svg');
	  font-weight: normal;
	  font-style: normal;
	}
	span , div {
		font-family: 'icomoon';
	}
	div::after {
		content: "\e91b";
	}

	</style>
</head>
<body>
	<span></span>
	<div></div>
</body>
</html>

效果图：

案例三：利用伪元素制作小米图片案例（鼠标经过盒子，盒子会有边框阴影）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	div {
		width: 632px;
		height: 340px;
		position: relative;
		border-radius: 10px;
		overflow: hidden;
	}
	div:hover::after {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		border: 20px solid rgba(255, 255, 255, 0.5);
		box-sizing: border-box;
	}

	</style>
</head>
<body>
	<div>
		<img src="mi.jpg" alt="">
	</div>
</body>
</html>

原图：

鼠标经过图片时候的样子

案例三：伪元素图标案例字体结合使用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
			@font-face {
		  font-family: 'icomoon';
		  src:  url('fonts/icomoon.eot?hrstq9');
		  src:  url('fonts/icomoon.eot?hrstq9#iefix') format('embedded-opentype'),
		    url('fonts/icomoon.ttf?hrstq9') format('truetype'),
		    url('fonts/icomoon.woff?hrstq9') format('woff'),
		    url('fonts/icomoon.svg?hrstq9#icomoon') format('svg');
		  font-weight: normal;
		  font-style: normal;
		}
	div {
		width: 200px;
		height: 30px;
		border: 1px solid #ccc;
		margin: 100px auto;
		font-family: "icomoon";
		position: relative;
	}
	div::before {   /*是一个能插入元素的选择器*/
		content: "\ea51";
		position: absolute;
		right: 10px;
		top: 5px;
	}
	div:hover {
		border: 1px solid red;
	}
	div:hover::before {
		color: red;
	
	}
	</style>
</head>
<body>
	<div>
		 
	</div>
</body>
</html>