CSS (三) 选择器

最新推荐文章于 2024-07-22 20:38:06 发布

久醉绕心弦，

最新推荐文章于 2024-07-22 20:38:06 发布

阅读量482

点赞数

分类专栏： css 文章标签： css html5 html

本文链接：https://blog.csdn.net/weixin_42262081/article/details/120303466

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

选择器

1、标签选择器
最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。
如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、input、a、甚至可以是 html 本身：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		   /* 通过标签p1设置字体颜色 */
			p1{
				color: #ff0000; 
			}
			/* 通过标签input设置背景颜色 */
			input{
				background-color: #409EFF;
			}
		</style>
	</head>
	<body>
		<p1>css标签选择器</p1><br>
		<input type="text">
	</body>
</html>

在这里插入图片描述

2、id选择器
首先，ID 选择器前面有一个 # 号
通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，一个ID只能在文档中使用一次，id名一般给程序使用，所以不推荐在css设置样式时使用id作为选择器。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/*id选择器*/
			/* 设置背景颜色 */
			#user{
				background-color: #409EFF;
			}
			#pwd{
				background-color: brown;
			}
		</style>
	</head>
	<body>
		<input type="text" id="user" /><br>
		<input type="text" id="pwd" />
	</body>
</html>

在这里插入图片描述

3、类选择器
必须将 class 指定为一个适当的值，类名前有一个点号（.）,通过class类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/*类选择器 */
			.work{
				height: 50px;
				width: 50px;
				background-color: #00AAFF;
			}
		</style>
	</head>
	<body>
		<div class="work"></div>
	</body>
</html>

在这里插入图片描述

4、属性选择器
通过元素的属性进行选择，当有相同属性时，根据需求而设置属性值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 属性选择器 */
			input[name='user']{
				background-color: #15155A;
			}
			input[name='pwd']{
				background-color: #0e5a09;
			}
		</style>
	</head>
	<body>
		<input type="text" name="user"><br>
		<input type="text" name="pwd">
	</body>
</html>

在这里插入图片描述
5、层级选择器
主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
		    /* 层级选择器 */
			.work div p {
				color: brown;
			}
		</style>
		
	</head>
	<body>
		<div class="work">
			<div>
				<p>层级选择</p>
			</div>
		</div>
	</body>
</html>

在这里插入图片描述
6、组选择器
多个选择器，每个选择器之间用逗号隔开如果有同样的样式设置，可以使用组选择器。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 组选择器 */
			p,h1,a {
				color: darkcyan;
			}
		</style>
	</head>
	<body>
		<p>标签1</p>
		<h1>标签2</h1>
		<a href="">标签3</a>
	</body>
</html>

在这里插入图片描述
7、伪类及伪元素选择器
在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。
（截图来自w3school）

列举下常用的：
active: 点击p标签时会变成设置的颜色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 激活p标签时的样式 */
			p:active {
				color: #00AAFF;
			}
		</style>
	</head>
	<body>		
		<p>标签1</p>
	</body>
</html>

在这里插入图片描述
foucs：键盘输入焦点添加样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 点击输入框时添加背景样式 */
			input:focus{
				background-color: #00AAFF;
			}
		</style>
	</head>
	<body>		
		<input type="text" />
	</body>
</html>

在这里插入图片描述
hover：鼠标悬浮在元素时，显示的样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 鼠标悬浮时显示的样式 */
			input:hover{
				background-color: #aa0000;
			}
		</style>
	</head>
	<body>		
		<input type="text" />
	</body>
</html>

在这里插入图片描述
通过属性cursor可以改变光标形状：

hover{ cursor: pointer;} ：呈小手形状

hover{ cursor: crosshair;}：十字架光标

hover{ cursor: default ;}：默认光标，通常是一个箭头

hover{ cursor: auto ;}：默认，浏览器设置的光标

hover{ cursor: move;}： 光标表示对象可被移动

hover{ cursor: e-resize;}： 光标表示矩形框的边缘可被向右移动

hover{ cursor: ne-resize;}：光标表示矩形框的边缘可被向上及向右移动

hover{ cursor: nw-resize;}：光标表示矩形框的边缘可被向上及向左移动

hover{ cursor: n-resize;}： 光标表示矩形框的边缘可被向上移动

hover{ cursor: se-resize;}：光标表示矩形框的边缘可被向下及向右移动

hover{ cursor: sw-resize;}：光标表示矩形框的边缘可被向下及向左移动

hover{ cursor: s-resize;}： 光标表示矩形框的边缘可被向下移动

hover{ cursor: w-resize：;}光标表示矩形框的边缘可被向左移动

hover{ cursor: text ;}：光标表示文本

hover{ cursor: wait ;}：光标表示程序正在加载

hover{ cursor: help;}： 光标表示帮助（通常是一个问号）

link：向未被访问的链接添加样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		/* 访问网址前的样式 */
			a:link{
				color: bisque;
			}
		</style>
	</head>
	<body>		
		<a href="www.baidu.com">baidu</a>
	</body>
</html>

在这里插入图片描述
visited：向已被访问的链接添加样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 访问网址后的样式 */
			a:visited{
				color: red;
			}
		</style>
	</head>
	<body>		
		<a href="wwww.xxx.com">网址</a>
	</body>
</html>