2021-08-15

weixin_56706590

于 2021-08-15 18:30:37 发布

阅读量97

点赞数 1

本文链接：https://blog.csdn.net/weixin_56706590/article/details/119714841

版权

CSS3

css3导学

1.样式表
2.规则
3.选择器+声明块
4.声明
5.css属性+css属性值组成的键值对

*{
				margin: 0;
				padding: 0;
			}

一、选择器

1、基本选择器及其扩展

（1）基本选择器

通配符
id #
类
元素元素名
后代空格
分组，(结合符)
优先级是指css声明的优先级，而不是选择器的优先级

（2）子元素选择器

＞直接后代选择器

（3）相邻兄弟选择器

这被称为一个相邻兄弟选择器，它只会匹配紧跟着的兄弟元素

#wrap > #first + .inner {
				color: #f00;
			}

（4）通用兄弟选择器

在使用 ~ 连接两个元素时，它会匹配第二个元素，条件是它必须跟(不一定是紧跟)在第一个元素之后，而且他们都有一个共同的父元素

#wrap #first ~ div {
				border: 1px solid;
				/* color: pink; */
			}

2、属性选择器

（1）存在和值选择器

① [attr]: 该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何

div[name]{
				border: 1px solid;
			}

② [attr=val]: 该选择器仅选择 attr 属性被复制为 val 的所有元素

div[name="atguigu_qhf"]{
				border: 1px solid;
			}

③ [attr~=val]: 表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分割的值列表，其中至少包含一个val

div[name~="atguigu"]{
				border: 1px solid;
			}

（2）子串值属性选择器

① [attr|=val]: 选择attr属性的值是val (包括val) 或以val-开头的元素

div[name|="atguigu"]{
				border: 1px solid;
			}

② [attr^=val]: 选择attr属性的值以val开头（包括val）的元素

div[name^="atguigu_qhf"]{
				border: 1px solid;
			}

③ [attr$=val]: 选择attr属性的值以val结尾（包括val）的元素

div[name$="atguigu"]{
				border: 1px solid;
			}

④ [attr*=val]: 选择attr属性的值中包含字符串val的元素

div[name*="atguigu"]{
				border: 1px solid;
			}

3、伪类与伪元素选择器

（1）链接伪类

link，visited，target是作用于链接元素的
① :link 表示作为超链接，并指向一个未访问的地址的所有锚
② :visited 表示作为超链接，并指向一个已访问的地址的所有锚
③ :target 代表一个特殊的元素，它的id是URI的片段标识符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			a{
				text-decoration: none;
				color: deeppink;
			}
			div{
				width: 200px;
				height: 200px;
				background: pink;
				display: none;
				text-align: center;
				font: 50px/200px "微软雅黑";
			}
			:target{
				display: block;
			}
		</style>
	</head>
	<body>
		<a href="#div1">div1</a>
		<a href="#div2">div2</a>
		<a href="#div3">div3</a>
		<div id="div1">
			div1
		</div>
		<div id="div2">
			div2
		</div>
		<div id="div3">
			div3
		</div>
	</body>
</html>

在这里插入图片描述

（2）动态伪类

由于a标签的:link和:visited可以覆盖所有a标签的状态，所以当:link,:visited,:hover,:active同时作用在a身上时,:link和:visited不能放在最后
① :hover 表示悬浮到元素上
② :active 表示匹配被用户激活的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#test:hover{
				color: pink;
			}
			#test:active{
				color: red;
			}
		</style>
	</head>
	<body>
		<a href="javascript:alert('清除成功');">清除缓存</a>
	</body>
</html>

在这里插入图片描述
③ 隐私与：visited选择器
只有下列的属性才能被应用到已访问链接：
color
background
border-color

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			a{
				text-decoration: none;
				color: black;
				display: block;
			}
			a:hover{
				font-size: 24px;
				color: red;
			}
			a:link{
				font-size: 48px;
				color: green;
			}
			a:visited{
				font-size: 96px;
				color: pink;
			}
		</style>
	</head>
	<body>
		<a href="#">红红火火恍恍惚惚</a>
		<a href="#1">红红火火恍恍惚惚</a>
		<a href="#2">红红火火恍恍惚惚</a>
		<a href="#3">红红火火恍恍惚惚</a>
		<a href="#4">红红火火恍恍惚惚</a>
		<a href="#5">红红火火恍恍惚惚</a>
		<a href="#6">红红火火恍恍惚惚</a>
	</body>
</html>

在这里插入图片描述

（3）表单伪类

表单相关伪类：
① :enabled 匹配可编辑的表单
② :disabled 匹配被禁用的表单
③ :checked 匹配被选中的表单
④ :focus 匹配获焦的表单

自定义单选按钮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			label{
				position: relative;
				float: left;
				width: 100px;
				height: 100px;
				border: 2px solid;
				overflow: hidden;
				border-radius: 50%;
			}
			label > span{
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				right: 0;
			}
			input{
				position: absolute;
				left: -50px;
				height: -50px;
			}
			input:checked + span{
				background: pink;
			}
		</style>
	</head>
	<body>
		<label>
			<input type="radio" name="atguigu" />
			<span></span>
		</label><label>
			<input type="radio" name="atguigu" />
			<span></span>
		</label><label>
			<input type="radio" name="atguigu" />
			<span></span>
		</label>
	</body>
</html>

效果
在这里插入图片描述

（4）结构性伪类

① nth-of-type 以元素为中心

nth-child系列	nth-of-type系列
nth-child (index)	nth-of-type (index)
first-child	first-of-type
last-child	last-of-type
nth-last-child (index)	nth-last-of-type (index)
only-child	only-of-type

② not 表示不选中
示例：样式未选中最后一个a标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>not</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				border: none;
			}
			a{
				text-decoration: none;
				color: #333;
				font-size: 14px;
				display: block;
				float: left;
				width: 100px;
				height: 30px;
			}
			div{
				width: 800px;
				margin: 0 auto;
			}
			div > a:not(:last-of-type){
				border-right: 1px solid red;
			}
		</style>
	</head>
	<body>
		<div>
			<a href="#">first</a>
			<a href="#">second</a>
			<a href="#">third</a>
			<a href="#">fourth</a>
			<a href="#">fifth</a>
		</div>
	</body>
</html>

效果
在这里插入图片描述
③ empty 表示内容为空，即什么内容都没有，连空格都不存在的元素
示例：将内容为empty的元素背景标为粉色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>empty</title>
		<style type="text/css">
			div{
				height: 200px;
				background: #abcdef;
			}
			div:empty{
				background: pink;
			}
		</style>
	</head>
	<body>
		<div></div>
		<div>Second</div>
		<div></div>
		<div>Third</div>
	</body>
</html>

效果
在这里插入图片描述

（5）伪元素选择器

伪元素	作用
before	指元素前面的伪元素
after	指元素后面的伪元素
first-letter	指元素内容的第一个字母
first-line	指元素的第一行内容
selection	指选定元素内容
root	指html根元素