CSS学习2

最新推荐文章于 2024-05-17 18:09:22 发布

aneyal

最新推荐文章于 2024-05-17 18:09:22 发布

阅读量473

点赞数 1

分类专栏：前端学习文章标签： css 学习 css3

本文链接：https://blog.csdn.net/aneyal/article/details/123445591

版权

前端学习专栏收录该内容

47 篇文章 2 订阅

订阅专栏

类选择器

类选择器定义及使用

类选择器使用英文点号开头进行标识，后面紧跟类名

类选择器的优点是能快速为页面中同类型的标签统一样式，但同时这也是缺点，那就是不能设计差异化样式

标签调用时使用class=""

技巧：长名称中可以使用"-"，最好不要使用下划线，也不要使用纯数字、中文命名，尽量使用英文表示

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>类选择器</title>
		<style>
			/* 声明类 */
			.b{
				color:blue;
			}
			.size100{
				font-size: 100px;
			}
		</style>
	</head>
	<body>
		<!-- 引用多个类 -->
		<span class="b size100">G</span>
	</body>
</html>

效果：

多类名选择器

当有多个类时，在class=""的引号内依次写类名，中间用空格隔开

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>类选择器</title>
		<style>
			/* 声明类 */
			.b{
				color:blue
			}
			.size{
				fomt.size: 20pz;
			}
		</style>
	</head>
	<body>
		<!-- 引用多个类 -->
		<span class="b size">G</span>
	</body>
</html>

效果：

ID选择器

使用

id选择器使用上有些类似类选择器，但其使用#开头

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>id选择器</title>
		<!-- 使用id选择器 -->
		<style>
			#big{
				color:red;
			}
		</style>
	</head>
	<body>
		<div id='big'>yes</div>
		<div>me</div>
		<div>no</div>
	</body>
</html>

效果：

id选择器和类选择器的区别

类选择器是可以多次重复使用的，类相似人名，但id选择器不能重复使用，id就像身份证号。同时，对于任何一个对象，其id是唯一的。

通配符选择器

通配符选择器用*表示，是所有选择器中作用最广的，可以匹配页面中的所有元素

格式：* {属性1：属性值1;属性2：属性值2;属性3：属性值3;}

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>id选择器</title>
		<!-- 使用通配符选择器 -->
		<style>
			/* 使网页所有元素均为红色 */
			* {
				color:red;
			}
		</style>
	</head>
	<body>
		<div >yes</div>
		<div>me</div>
		<div>no</div>
	</body>
</html>

效果：

伪类选择器

定义

伪类选择器用于向某些选择器添加特殊的效果，例如给链接添加特殊效果

伪类选择器使用:标识。

链接伪类选择器

:link（未访问的链接）

:visited（已访问的链接）

:hover（鼠标移动到链接上）

:active（选定的链接）

注意，使用时尽量不要改变状态

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>链接伪类选择器</title>
		<!-- 使用链接伪类选择器 -->
		<style>
			/* 链接未访问时的状态 */
			a:link{
				font-size: 16px;
				color: blue;
				font-weight: 700;
			}
			/* 已访问的链接的状态 */
			a:visited{
				font-size: 16px;
				color: red;
				font-weight: 700;
			}
			/* 鼠标移动到链接上时的状态 */
			a:hover{
				font-size: 16px;
				color: gray;
				font-weight: 700;
			}
			/* 选定的链接的状态 */
			/* 即按着鼠标不松开 */
			a:active{
				font-size: 16px;
				color: green;
				font-weight: 700;
			}
		</style>
	</head>
	<body>
		<!-- 一个超链接 -->
		<div><a href="https://www.baidu.com">百度</a></div>
	</body>
</html>

效果：

简写方式

实际应用时，按照实际情况，可以不写完所有的状态的链接伪类选择器

...
    <style>
        a{
            font-weight:700;
            color:blue;
            font-size:16px;
        }
        /*设定鼠标移动到链接上时链接变色*/
        a:hover{
            color:red;
        }
    </style>
...

结构伪类选择器

结构伪类选择器是CSS3中新增的内容

:first-child 选取属于其父元素的首个子元素的指定选择器

:last-child 选取属于其父元素的最后一个子元素的指定选择器

:nth-child(n) 匹配属于其父元素的第N个子元素，不论元素的类型，n从0开始，n可以为even，表示选择所有奇数项的子元素，也可以使用odd选择所有偶数项的子元素，n可以是数字、关键词或包含n的公式

nth-last-child(n) 匹配属于其父元素的倒数第N个子元素，不论元素的类型，从最后一个元素开始计数，n可以是数字、关键词或包含n公式，n也可以为even，表示选择所有奇数项的子元素，也可以使用odd选择所有偶数项的子元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>结构伪类选择器</title>
		<style>
			/* 让元素的父元素的第一个子元素的颜色为粉色 */
			/* 即让列表的第一个变为粉色 */
			li:first-child {
				color:pink;
			}
			/* 让元素的父元素的最后一个子元素的颜色为红色 */
			/* 即让列表的最后一个变为红色 */
			li:last-child {
				color:red;
			}
			/* 让元素的父元素的第四个子元素的颜色为绿色 */
			/* 即让列表的第四个变为绿色 */
			li:nth-child(4){
				color: green;
			}
			/* 让元素的父元素的倒数第二个子元素的颜色为紫色 */
			/* 即让列表的第七个变为紫色 */
			li:nth-last-child(2){
				color: purple;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>第一</li>
			<li>第二</li>
			<li>第三</li>
			<li>第四</li>
			<li>第五</li>
			<li>第六</li>
			<li>第七</li>
			<li>第八</li>
		</ul>
	</body>
</html>

效果：

目标伪类选择器

:target 选取当前活动的目标元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>目标伪类选择器</title>
		<style>
			/* 目标伪类选择器，选取当前活动的元素 */
			/* 所以当点击超链接时，跳转到id为test的元素，该元素变为活跃状态，变红 */
			:target{
				color: red;
			}
		</style>
	</head>
	<body>
		<!-- 跳转到id为test的元素 -->
		<a href="#test">test</a>
		
		<h3 id='test'>试试</h3>
	</body>
</html>

效果：