善用css伪类和伪元素-逐梦个人博客

咋一看这个标题可能会觉得有点玄乎，那么什么是伪类，什么又是伪元素呢？我们接下来一个一个来看一下。

一、什么是伪类？

就其定义而论，“伪类用于向某些选择器添加特殊的效果”，说实话是很难看懂他到底是干嘛的，但我们可以从它的使用方面感受他带来的便利，在开始讲使用之前我们要先了解一下常用的伪类：

1、:link 应用于未被访问过的链接；

2、:hover 应用于鼠标悬停到的元素；

3、:active 应用于被激活的元素；

4、:visited 应用于被访问过的链接，与:link互斥。

5、:focus 应用于拥有键盘输入焦点的元素

6、:first-child 选择某个元素的第一个子元素；

7、:last-child 选择某个元素的最后一个子元素；

8、:nth-child() 选择某个元素的一个或多个特定的子元素；

9、:empty 选择的元素里面没有任何内容。

看到:hover是不是很熟悉，我们经常会用到的链接悬停变色就是通过这个伪类来做的，那么除了链接悬停变色我们还能通过伪类做些什么呢？

1、子菜单展开

HTML:

<ul class="menu">
	<li>Home</li>
	<li>About</li>
	<li>
		Caregory
		<ul class="sub-menu">
			<li>Category1</li>
			<li>Category2</li>
			<li>Category3</li>
		</ul>
	</li>
</ul>

CSS:

.menu > li {
	display: inline-block;
	padding: 0 18px;
	list-style: none;
	position: relative;
}
.menu li .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	display: none;
}
.menu > li:hover .sub-menu {
	display: block;
}

虽然样式有点丑，但当我们鼠标移动到Category菜单上时，下面的子菜单就展开了，在没有使用任何的js情况下哦，是不是很方面？

2、带间隔多列布局

HTML:

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
	<li>10</li>
</ul>

CSS:

ul {
	width: 100px;
	list-style: none;
	overflow: hidden;
}
li {
	color: #fff;
	float: left;
	width: 45px;
	height: 45px;
	line-height: 45px;
	text-align: center;
	background: purple;
	margin-bottom: 10px;
}
li:nth-child(2n) {
	margin-left: 10px;
	background: orange;
}

效果图：

如果我们对每个li都设置margin-left那样式会很诡异，利用nth-child我们可以对序号为2的倍数的li设置margin-left刚好完成我们预期的效果，当然多列布局在实际开发中我们也可以选择使用flex，那样会更方便。

二、什么又是伪元素呢？

伪元素和伪类的定义刚好相反，“伪元素用于向某些选择器设置特殊效果”，伪元素主要有以下几类：

1、:first-letter 选择元素文本的第一个字（母）。

2、:first-line 选择元素文本的第一行。

3、:before 在元素内容的最前面添加新内容。

4、:after 在元素内容的最后面添加新内容。

伪元素又有些什么应用呢？

1、文章首字下沉

HTML：

<div class="content">
观自在菩萨，行深般若波罗蜜多时，照见五蕴皆空，度一切苦厄。舍利子，色不异空，空不异色，色即是空，空即是色，受想行识，亦复如是。舍利子，是诸法空相，不生不灭，不垢不净，不增不减。是故空中无色，无受想行识，无眼耳鼻舌身意，无色声香味触法，无眼界，乃至无意识界，无无明，亦无无明尽，乃至无老死，亦无老死尽。无苦集灭道，无智亦无得。以无所得故。菩提萨埵，依般若波罗蜜多故，心无挂碍。无挂碍故，无有恐怖，远离颠倒梦想，究竟涅盘。三世诸佛，依般若波罗蜜多故，得阿耨多罗三藐三菩提。故知般若波罗蜜多，是大神咒，是大明咒，是无上咒，是无等等咒，能除一切苦，真实不虚。故说般若波罗蜜多咒，即说咒曰：揭谛揭谛，波罗揭谛，波罗僧揭谛，菩提萨婆诃。
</div>

CSS:

.content:first-letter {
	font-size: 60px;
	float: left;
}

效果：

上面一段摘自心经，作为程序员，我们要静得下心，耐得住寂寞，浮躁的时候不妨练练心经，助于静心。

2、背景图片模糊

在网站中，如果我们使用背景图的话，有时候背景图片太清晰会有些喧宾夺主，感觉有些主次不明，这个时候我们就需要让背景图片适当模糊以突出主体，除了修改原图，通过css我们也可以做到模糊背景的效果：

<div class="background"></div>
<style type="text/css">
	.background {
		width: 211px;
		height: 65px;
		position: absolute;
	}
	.background:before {
		content: '';
		position: absolute;
		width: 100%;
	    height: 100%;
		background-image: url(/wp-content/uploads/2017/09/logo.png);
		z-index: -2;
	}
	.background:after {
		content: '';
	    position: fixed;
	    width: 100%;
	    height: 100%;
	    top: 0;
	    left: 0;
	    background: rgba(255,255,255,.8);
	    z-index: -1;
	    background-size: 100% 100%;
	    filter: blur(8px);
	}
</style>

这里的例子可能不太好，具体效果可以看博客的背景设置。

3、CSS爱心

HTML：

<div class="heart"></div>

CSS:

.heart {
  margin: 200px;
  width: 200px;
  height: 200px;
  position: relative;
  background: #f00;
  transform: rotate(45deg);
}
.heart:before {
  content: '';
  width: 100%;
  height: 100%;
  background: #f00;
  border-radius: 50%;
  left: -50%;
  top: 0;
  position: absolute;
}
.heart:after {
  content: '';
  width: 100%;
  height: 100%;
  background: #f00;
  border-radius: 50%;
  top: -50%;
  left: 0;
  position: absolute;
}

当然还有一种css写法：

.heart {
  margin: 200px;
  width: 200px;
  height: 200px;
  position: relative;
  background: #f00;
  transform: rotate(45deg);
}
.heart:before {
  content: '';
  width: 100%;
  height: 100%;
  border-radius: 50% 50% 0 0;
  background: #f00;
  position: absolute;
  transform: rotate(-90deg);
  margin: 0 0 0 -50%;
}
.heart:after {
  content: '';
  width: 100%;
  height: 100%;
  border-radius: 50% 50% 0 0;
  background: #f00;
  position: absolute;
  margin: -50% 0 0 0;
  transform: rotate(0deg);
}

效果：