本文主要是介绍对css中选择器的优先级和优先权的思考总结,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
我们知道css样式有三种形式
1:行内样式;
2:内部样式;
3:外部样式;
那你知道如果对于同一元素的同一属性,上述三个样式都设置了一遍,最后显示的是以谁为准的么?
可能大多数的人都会说:行内样式>内部样式>外部样式;至少以前我是这么认为的;接下来就用代码结合解释详细的描述一下样式的优先级和优先权的不同所带来的不同样式表现。
优先级
一:内部样式和外部样式的优先级
在比较之前,先看这样两段代码:
<!--第一段代码-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>样式优先级的比较</title><style type="text/css">#s3 {color: red;}</style><style type="text/css">#s3 {color: blue;}</style>
</head>
<body>
<p id="s3">中华人民共和国万岁</p>
</body>
</html>
运行结果:此时p标签中的文本显示的颜色是blue
<!--第二段代码-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset
这篇关于对css中选择器的优先级和优先权的思考总结的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!