css简介与选择器（优先级）

最新推荐文章于 2023-07-22 14:22:25 发布

賣可樂的男孩

最新推荐文章于 2023-07-22 14:22:25 发布

阅读量163

点赞数

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

本文链接：https://blog.csdn.net/qq_52147099/article/details/126687682

版权

前端基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS简介：

html是对网页划分区域
css是对划分区域的美化
语法：
选择元素{
属性1：属性值1，
属性2：属性值2
…
}

<div style="width: 100px; height: 100px;"></div>

这种为行内样式

<div class="box"></div>
.box{
	width:200px;
	height:200px;
}

这种为内部样式，一般放在head标签里面，使用style定义。

外部样式为：重新创建一个.css文件，并使用link加载进页面。

注意：
内部样式与外部样式放的（上下）位置不一样，优先级就不一样
优先级：就近原则
!important大于所有优先级

基本选择器：

网页有很多div，那么我们怎么区分呢？
解决：通过class取名字—可重复；id取名—唯一
优先级：
id > class > 元素 > *
.class ----》点+class值选中相应的class
#id---------》#+id值选中相应的id

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				color: #3E8E41;
			}
			div{
				color: red;
			}
			.div{
				color: #6495ED;
			}
			#div{
				color: #000000;
			}
			#username{
				width: 1.25rem;
			}
		</style>
	</head>
	<body>
		<!-- 网页有很多div，那么我们怎么区分呢？
			解决：通过class取名字--可重复；id取名--唯一
			优先级：
			id > class > 元素 > *
			.class   #id 
		 -->
		 <div class="div" id="div">1</div>
		 <div class="div">2</div>
		 <div>3</div>
		 <p>p</p>
		 <form action="" method="post">
		 	<input type="text" id="username" value="" />
		 </form>
	</body>
</html>

组合选择器：

组合选择器
必须有标签
子代元素：（标签的下一级标签，不包括下下一级标签） div>div
后代元素：（包含标签里所有的标签）div div

color属性可以被子元素继承（父元素修改元素，子元素也会被修改）
兄弟选择器 + （加号）紧挨着的相邻元素，只能选择弟，不能选择兄

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.container div{
				color: red;
			}
			.container .content{
				color: green;
			}
			.container>.content{
				color: blue;
			}
			.header>.nav{
				color: #000000;
			}
			.nav+.content{
				color: #83F5FF;
			}
		</style>
	</head>
	<body>
		<!-- 组合选择器
			必须有标签
			子代元素：（标签的下一级标签，不包括下下一级标签） div>div
			后代元素：（包含标签里所有的标签）div div
			
			color属性可以被子元素继承（父元素修改元素，子元素也会被修改）
			兄弟选择器 + （加号）紧挨着的相邻元素，只能选择弟，不能选择兄
		 -->
		
		<div class="container">
			
			<div class="header">
				<div class="logo">
					<img src="../../shop/1.png" >
				</div>
				<div class="nav">导航</div>
				<div class="content">登录</div>
			</div>
			
			<div class="content">
				<div class="left">左边栏</div>
				<div class="right">右边栏</div>
				<p>文本</p>
			</div>
			
			<div class="footer">链接</div>
		</div>
	</body>
</html>

伪类选择器：

伪类选择器-----》“:”
选择container下的第一个div
选择第一个：first-child
选择最后一个：last-child
选择中间第n个：nth-child(n)

鼠标放上去的时候有效果，移开恢复：
鼠标悬停：hover ---鼠标移入移出

当按住鼠标时有效果：
active

link:链接未点击时的效果
linked:点击后的效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.container>div:nth-child(3){
				color: red;
			}
			
			.container>div:hover{
				color: #E32D20;
			}
			.container>div:active{
				color: #0000FF;
			}
			
		</style>
	</head>
	<body>
		<!-- 伪类选择器
			选择container下的第一个div
			选择第一个：first-child
			选择最后一个：last-child
			选择中间第n个：nth-child(n)
			
			鼠标放上去的时候有效果，移开恢复：
			鼠标悬停：hover ---鼠标移入移出
			
			当按住鼠标时有效果：
			active
			
			link:链接未点击时的效果
			linked:点击后的效果
		 -->
		 <div class="container"> 
		 	<div>1</div>
		 	<div>2</div>
		 	<div>3</div>
		 	<div>4</div>
		 	<div>5</div>
		 </div>
		 <a href="http://baidu.com">点击</a>
	</body>
</html>

选择器得优先级：

*<元素<class<(子元素/后代选择器–就近原则)<伪元素<id<兄弟选择器<!important

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				color: red;
			}
			.third+#div{
				color: #728E70;
			}
			
			#div{
				color: yellow;
			}
			div{
				color: #0000FF;
			}
			
			.container .first:first-child{
				color: #55AAFF;
			}
			.container>.first{
				color: #728e70;
			}
			.container .first{
				color: #008000;
			}
		</style>
	</head>
	<body>
		<!-- 选择器的优先
			*<元素<class<(子元素/后代选择器--就近原则)<伪元素<id<兄弟选择器<!important
		 -->
		 
		 <div class="container">
		 	<div class="first">第一个</div>
		 	<div class="second">第二个</div>
		 	<div class="third">第三个</div>
		 	<div id="div">第四个</div>
		 	<div>第五个</div>
		 </div>
	</body>
</html>