css选择器

最新推荐文章于 2024-09-10 14:15:01 发布

颜词

最新推荐文章于 2024-09-10 14:15:01 发布

阅读量173

点赞数

分类专栏： html及css 文章标签： html css css选择器

本文链接：https://blog.csdn.net/qq_45398309/article/details/99189934

版权

html及css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

概述
css简介
- 什么是css
- css作用
css选择器
总结

概述

本文主要针对于css选择器进行讲解，此外会带一些css其他内容。

css简介

什么是css

层叠样式表，css是对html进行样式修饰语言。
层叠：就是层层覆盖叠加，如果不同的css样式对同一html标签进行修饰，样式有冲突的部分应用优先级高的，不冲突的部分共同作用
样式表：就是css属性样式的集合

css作用

(1)修饰html，使其html样式更加好看
(2)提高样式代码的复用性
(3)html的内容与样式相分离，便于后期维护

css选择器

基本选择器

1、标签（元素）选择器：
语法：html标签名{css属性}

<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				height: 300px;
				border: 1px solid red;
				background-color:gray ;
			}
		</style>
	</head>
	<body>
		<div >
			
		</div>
	</body>

2、id选择器
语法：#id的值{css属性}

<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#div1{
				height: 300px;
				border: 1px solid red;
				background-color:gray ;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			
		</div>
	</body>

3、类选择器（用的较多）
语法：.class的值{css属性}
注：前面有个点哦！跟id选择器相比他可多多个标签进行修饰（id唯一性）。

<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.div1{
				height: 300px;
				border: 1px solid red;
				background-color:gray ;
			}
		</style>
	</head>
	<body>
		<div class="div1"></div>
		<div class="div1"></div>
		
	</body>

注：基本选择器中优先级：id选择器>类选择器>标签选择器

属性选择器

语法：[属性] {css属性} 或[属性=“属性值”] {css属性} 或基本选择器[属性=“属性值”] {css属性}

<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
	[type] {
		height: 200px;
		width: 400px;
		border: 2px solid red;
	}
	</style>
</head>
<body>
	<form>
		<input type="text" />
	</form>
	
</body>

在这里插入图片描述

伪类选择器

多用于a标签
语法：
静止状态 a:link{css属性}
悬浮状态 a:hover{css属性}
触发状态 a:active{css属性}
完成状态 a:visited{css属性}

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		/*未访问连接：静止状态*/
			a:link{color: gray;}
			/*已访问连接：完成状态*/
			a:visited{color: red;}
			/*鼠标悬浮状态*/
			a:hover{color: green;}
			/*触发状态*/
			a:active{color: blue;}
		</style>
</head>
<body>
	<a href="#">选择器</a>
</body>