善用css伪类和伪元素

原创 Dean 工作笔记 二维码阅读
2018-11-01 23:24

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

一、什么是伪类?

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

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(https://www.deanhan.cn/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);
}

效果:

两种方式原理都差不多,都是用一个正方形和两个伪元素的圆活着椭圆拼成的。

当然伪类和伪元素的使用场景还有很多,比如气泡三角,清除浮动之类的,有兴趣的可以去研究研究。

本文地址:https://www.deanhan.cn/pseudo-class-element.html
版权声明:本文为原创文章,版权归 Dean 所有,欢迎分享本文,转载请保留出处!
  • 支付宝二维码 支付宝
  • 微信二维码 微信