前端_CSS_02：CSS的选择器

最新推荐文章于 2024-07-25 11:52:08 发布

耳东er

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量63

点赞数

分类专栏：前端基础文章标签： html css

本文链接：https://blog.csdn.net/q734044429/article/details/117967429

版权

前端基础专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、三大基本选择器

⭐标签名（元素）选择器
⭐ID选择器
⭐类（class）选择器

<html>
	<head>
		<meta charset="utf-8">
		<title>基本选择器</title>
		
		<style type="text/css">
			/* 
			（标签名）元素选择器：给页面所有同名的标签定义样式的选择器
				语法：标签名{样式}	
			*/
			span{/*span标签都更改样式*/
				font-size: 20px;
				color: #8A2BE2;
				background-color: black;
				font-family: "楷体";
			}
			/* 
			id选择器：给页面中指定id的标签定义样式的选择器
				一般body标签中的任何一个标签都有id属性
				id属性的值一般在同一个网页上是不允许有重复的
				id属性值的唯一性有助于我们定位到页面上的唯一的一个标签
				id属性命名规则：
					不能有空格和一些特殊符号
					特殊符号中仅可以使用 _ ,不推荐 $ , $ 会和 jquery命名冲突
					不能以数字开头
					————推荐写法：应该以字母开头，数字放在后面
				语法：#id值{样式}
			*/
			#p1{ /*指定id：p1标签改样式 */
				font-size: 22px;
				color: #FFFF00;
				background-color: #696969;
				width: 250px;
				height: 100px;
			}
			/* 
			类选择器：给页面中指定class的标签定义样式的选择器
				一般body标签中的所有标签都有class属性
				多个不同的标签可以有相同的class属性值
				通过标签的class属性确定样式的作用范围
				语法：.class属性值{样式}
			*/
			.c1{/*指定相同的class属性改样式*/
				font-size: 28px;
				color: aqua;
				background-color: cadetblue;
				width: 300px;
				text-decoration: none;/*消除字体下划线*/
			}
		</style>
	</head>
	<body>
		
		<span id="s1">今天是个上分的好日子</span>
		<br>
		<span id="s2">今天是个上分的好日子</span>
		
		<p id="p1" class="pc1">今天是个上分的好日子</p>
		<p id="p2" class="pc2">今天是个上分的好日子</p>
		<p id="p3" class="c1">今天是个上分的好日子</p>
		<a href="#" class="c1">百度</a>
		
	</body>
</html>

二、其他选择器

在这里插入图片描述

<html>
	<head>
		<meta charset="utf-8">
		<title>其他选择器</title>
		<style type="text/css">
			/* 
			层级选择器：通过层次关系定位样式的作用范围
				层级选择器的每个层级选择可以是标签名，id，class
				语法：外层 内层{样式}
			*/
		   /*可以是标签名或者.class值或者#id值*/
		    p font span{
				color: red;
			}
			/*
			属性选择器:根据标签某个属性的特定属性值确定样式的作用范围
				属性选择器的每个选择可以是标签名，id，class
				语法：标签名[属性名=属性值]{样式}
			*/
		    /*可以是标签名或者.class值或者#id值*/
			.i[type="password"]{
				width: 300px;
				height: 50px;
			}
			/*
			分组选择器:可以将多个不同层级关系，不同class属性，id，标签名同时使用相同的样式效果 
				分组选择器的每个选择可以是标签名，id，class
				语法：标签名，标签名，.class值，#id值{样式}
			*/
		    /*可以是标签名或者.class值或者#id值*/
			#ha,h2,.s2,p{
				color: #00FFFF;
			}
		</style>	
	</head>
	<body>
		<span id="p1">今天是上分的好日子</span>
		<p>
			<span>今天是上分的好日子</span><br>
			<font>
				<span class="sc1">今天是上分的好日子</span>
			</font>
		</p>
		
		<input type="text" class="i"/><br>
		<input type="password" class="i"/><br>
		<input type="password" class="i"/><br>
		<input type="password" class="i"/><br>
		
		<h1 id="ha">今天是上分的好日子</h1>
		<h2 class="ch">今天是上分的好日子</h2>
		<span class="s2">今天是上分的好日子</span>
		<p id="pa">今天是上分的好日子</p>

	</body>
</html>

三、伪类选择器

<html>
	<head>
		<meta charset="utf-8">
		<title>伪类选择器</title>
		
		<style type="text/css">
			/* 
			伪类选择器可以四个同时使用，也可以单个使用
				————link、visited、hover、active
			如果是四个一块使用，注意顺序：
				————a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！
				————a:active 必须在 CSS 定义中的 a:hover 之后才能生效！
				————伪类名称对大小写不敏感。
			*/
			#a1:link{/* 未访问的链接 */
				color: #000000;
				font-size: 30px;
				text-decoration: none;
				background-color: #8A2BE2;
			}
			a:visited{/* 已访问的链接 */
				color: #696969;
				background-color: #5F9EA0;
			}
			a:hover{/* 鼠标悬停链接 */
				color:  #FF0000;
				background-color: #000000;
			}
			a:active{/* 已选择的链接 */
				color:  #8A2BE2;
				background-color: #000000;
			}
			
			div{/* 标签名选择器 */
				border: 1px solid red;
				width: 200px;
				height: 200px;
				background-color: #FFFF00;
			}
			div:hover{/* 鼠标悬停链接 */
				background-color: #FF0000;
			}
		</style>
	</head>
	<body>
		<a href="https://www.baidu.com" id="a1">百度</a>
		
		<div ></div>
	</body>
</html>

耳东er

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端_CSS_02：CSS的选择器

一、三大基本选择器⭐标签名（元素）选择器⭐ID选择器⭐类（class）选择器二、其他选择器⭐层级选择器⭐属性选择器⭐分组选择器三、伪类选择器link、visited、hover、active
复制链接

扫一扫

专栏目录