css优先级和四种接入方式

最新推荐文章于 2024-08-11 23:43:12 发布

原创最新推荐文章于 2024-08-11 23:43:12 发布 · 858 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css优先级 #css选择器接入方式 #接入方式 #css

HTML 专栏收录该内容

18 篇文章

订阅专栏

本文详细解析了CSS选择器的优先级规则及其四种接入方式：内部链接、直接写入、导入多个样式表及标签内写入。通过具体实例展示了不同接入方式的效果，帮助开发者更好地理解和应用CSS选择器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css优先级和四种接入方式

（一）css选择器具有优先级，优先级顺序就是：控制的越精细就越高。

比如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>css 控制段落</title>
<meta http-equiv="Content-Type" content="text/html; charset= utf8" />
<style>
p{
	color: red;
}
.text2{
	color: yellow;
}
#text1{
	color: blue;
}
div p{
	color: pink;
}
div #text1{
	color: black;
}
</style>
</head>
    <body>
	<div>
		<p id="text1" class="text2">hello</p>
	</div>
	</body>
</html>

优先级顺序：

p < class < id < div中的 id

（二）css四种接入方式

1.外部链接一个css文件，我们在HTML文件头部分标明：

注：./mycss.css 是指在html文档同目录下的css文件(./可以省略)，如果是上一级目录就是 ../mycss.css

例子：主css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" href="./mycss.css" />

</head>
    <body>
    	<div>hello</div>
    </body>
</html>

调用的css

div{
	width: 100px;
	height: 100px;
	background: blue;
}

效果显示：

2.在头部直接写入css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
div{
	width: 100px;
	height: 100px;
	background: blue;
}		
</style>

</head>
    <body>
    	<div>hello</div>
    </body>
</html>

3.外接多个css文件时，导入

具体的用法，以第一个为例，意思就是说，我调用的css可以导入另外一个css文件

实例：

主程序：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>主程序</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="./mycss.css" />

</head>
    <body>
    	<div id="text">hello</div>
    </body>
</html>

mycss:

@import url(mycss2.css);
div{
	width: 100px;
	height: 100px;
	background: gray;
}

mycss2:

#text{
	border:10px solid blue;
}

效果显示：

4.直接在标签里写入对这个标签的css控制