HTML5 | 034 - CSS选择器优先级 | 全网最粗暴有效
Posted 鱼C工作室
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5 | 034 - CSS选择器优先级 | 全网最粗暴有效相关的知识，希望对你有一定的参考价值。
在我们设计了一个很酷炫的块状阴影。
有位超可爱的鱼油，在提出，优先级的疑问，今天搞定之！
到目前为止，我们已经搞定了 C3 很大一部分的基础知识。
因为不同类型的属性，可以干相同的事情，所以优先级自然就出现了！
先上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css"></style>
</head>
<body>
<h1 class="Happy" id="FishC">新春快乐～</h1>
</body>
</html>
效果图：
添加 CSS 颜色样式：
<style type="text/css">
h1{
color: red;
}
.Happy{
color: blue;
}
#FishC{
color:yellow;
}
</style>
你猜效果图，会显示什么效果呢？
在上面的代码中，我们使用了三种选择器：
id 选择器（#FishC{...}）、类选择器（.Happy{...}）、标签选择器{h1{...}}
从效果图，我们知道，id 选择器优先级最高！
现在注释掉，看剩下两个谁厉害：
h1{
color: red;
}
.Happy{
color: blue;
}
#FishC{
/*color:yellow;*/
}
效果图：
不言而喻，类选择比较腻害～
在前两篇文章，我们使用了类选择器，a:hover{...}，只要鼠标移动到某区域，会变亮。
我来总结下他们的优先级。
在日常开发复杂的 Web 时，不可避免的使用大量的样式表。
因为多，所以产生问题的可能性也大大提高了。
有很大一部分，是因为优先级！
不管怎样，一定要记住下面这个优先级表
通用选择器*{..} < 标签选择器 h1{...} < 类选择器.black{...} < 伪类选择器a:hover{...} < ID选择器#title{...}
如果喜欢本系列 HTML 帖子
欢迎到鱼C论坛订阅 专辑☟
HTML5 - 庖丁解牛
以上是关于HTML5 | 034 - CSS选择器优先级 | 全网最粗暴有效的主要内容，如果未能解决你的问题，请参考以下文章