CSS优先级计算的规则优先级计算的规则
主要介绍了CSS优先级计算的规则,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过
来看看吧
最近在学习CSS优先级计算的规则这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记。
CSS的权重的权重
一、一、CSS的引入方式的引入方式
1.在节点元素上,使用style属性
2.通过link引入外部文件
3.通过style标签在页面内引入
三种引入方式的区别
index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="body.css">
<style type="text/css">
body {
background: red;
}
</style>
</head>
<body style="background: yellow;">
</body>
</html>
body.css文件
body {
background: green;
}
1.第一种方式相对后面两种优先级高,与引入顺序无关 无论link和style标签放在head内,还是放在body内,或者放在html标签
结尾,页面都会呈现yellow
2.第二种和第三种为平级引入,后引入的样式覆盖之前的引入样式 去掉body上的style标签
调整link和style标签的先后顺序。link在前,style标签在后,页面呈现red,相反,页面会呈现green
二、获取节点的方式二、获取节点的方式
1.id
2.class
3.标签
4.属性
id
在一个页面中id值应该是唯一,但是,当出现多个相同id时,样式对所有id节点是有效的,使用方式:#后面跟节点id值
<body>
<p id="id_p">第一个段落</p>
<p id="id_p">第二个段落</p>
</body>
#id_p {
color: red;
}
结果显示,两个段落中的文字都呈现red
评论0
最新资源