css行内、内嵌、链接单独文件样式优先级

css样式优先级判断

行内样式优先级>内嵌样式/链接单独文件
行内样式优先级最大,单独链接和内嵌样式需要按顺序选择,按就近原则采用样式,后定义的样式优先级高。

p{
	color:black;
	text-align: left;
	font-size: 8pt;


}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>链接样式+内嵌样式</title>
	
	<style type="text/css">
	p{
		color: blue;
		font-size: 20pt;
	}
	</style>
	<link rel="stylesheet" type="text/css" href="style.css">
	<!--z只对当前的页面有效-->
</head>
<body>
	<h1>首页</h1>
	<h2>导航</h2>
	<a href="http://www.baidu.com">问问百度</a>
	<p >天使投资</p>
	<p style="color: red">行内>内嵌>链接样式</p>
	
</body>
</html>

在这里插入图片描述
更改内嵌样式和链接单独文件的顺序

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>链接样式+内嵌样式</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	
	<style type="text/css">
	p{
		color: blue;
		font-size: 20pt;
	}
	</style>
	<!--z只对当前的页面有效-->
</head>
<body>
	<h1>首页</h1>
	<h2>导航</h2>
	<a href="http://www.baidu.com">问问百度</a>
	<p >天使投资</p>
	<p style="color: red">行内>内嵌>链接样式</p>
	
</body>
</html>

在这里插入图片描述
所以行内样式优先级最大,单独链接和内嵌样式需要按顺序,按就近原则采用样式。

发布了18 篇原创文章 · 获赞 8 · 访问量 2097

猜你喜欢

转载自blog.csdn.net/weixin_43698704/article/details/103836648
今日推荐