CSS学习笔记（伪类与伪元素）

伪类
伪类即不同元素不同状态表示不同样式

静态伪类
link:超链接点击之前的样式

visted：超链接在点击之后的样式

#静态伪类仅用于超链接，用的少
动态伪类
hover:鼠标放到元素上的状态

active:点击时未松开鼠标左键的状态

focus:输入框在获得焦点时的状态（即文本输入光标闪烁时状态）

#动态伪类适用于任何元素，常用
伪元素
伪元素即文档中没有出现的元素
first-letter选择的是元素中第一个文字

first-line标签中的第一行，会随着浏览器的缩放自动调整效果

before元素内容之前添加新内容，必须配合content使用（无法被选中）

after元素内容之后添加新内容必须配合content使用（无法被选中）
#伪元素可以认为是新的元素改变样式
#伪类使用：
伪元素使用：：
以下为简易导航栏制作，鼠标悬停可变色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			nav{width:1000px;height:40px;background:black;margin:100px auto}
			nav div{width:100px;height:40px;line-height:40px;float:left;color:white;text-align: center;}
		    nav div:hover{
		    	font-size: 20px;
		    	color: papayawhip;
		    }
		</style>
	</head>
	<body>
		<nav>
		<div id="">电脑办公</div>
		<div id="">平面设计</div>
		<div id="">室内设计</div>
		<div id="">影视动画</div>
		<div id="">工业自动</div>
		<div id="">会计课程</div>
		<div id="">人工智能</div>
		</nav>
	</body>
</html>

效果如下：在这里插入图片描述
以下为伪元素制造下划线实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			ul{
				width: 200px;
				margin: auto;/*注释*/
			}
			ul li{
				width:200px;
				height:50px;
				line-height: 50px;
				text-align: center;
			}
			ul li::after{
				content:"";
				display:block;/*换行*/
				border-bottom: 1px solid yellowgreen;/*设置边框下划线与颜色*/
                /*还可在其后添加div块，后代码改为
                 * ul li div{
                 * 	border-bottom: 1px solid yellowgreen;
                 * }
                 * 即可
                 */			
			}
		</style>
	</head>
	<body>
		<ul>
			<li>醉里论道，醒时折花1</li>
			<li>醉里论道，醒时折花2</li>
			<li>醉里论道，醒时折花3</li>
			<li>醉里论道，醒时折花4</li>
			<li>醉里论道，醒时折花5</li>
		</ul>
		
	</body>
</html>

效果如图：
在这里插入图片描述

CSS学习笔记（伪类与伪元素）

猜你喜欢