一、优先级

不同级别

1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
2. 作为style属性写在元素内的样式
3. id选择器
4. 类选择器
5. 元素选择器
6. 通配符选择器
7. 浏览器自定义或继承

总结排序：!important > 行内样式 > ID选择器 > 类选择器 > 元素 > 通配符 > 继承 > 浏览器默认属性

同一级别

(1) 同一级别中后写的会覆盖先写的样式

(2) 同一级别css引入方式不同，优先级不同

总结排序：内联(行内)样式 > 内部样式表 > 外部样式表 > 导入样式(@import)。

对于选择器优先级，还可以通过计算权重值来比较。

例1、

test.css文件

#my{background:blue;}

html文件

<link rel="stylesheet" type="text/css" href="./css/test.css">
<style>
/*这里是内部样式*/
#my{background:red;}
</style>
<span id="my">333</span>

执行结果：span最后为红色。

说明css引入方式优先级：内部样式表 > 外部样式表

例2、

 <link rel="stylesheet" type="text/css" href="./css/test.css">
 <style>#my{background:red;}</style>
 <span id="my" style="background: yellow">333</span>

执行结果：span最后为黄色。

说明css引入方式优先级：内联(行内)样式 > 内部样式表 > 外部样式表

二、选择器

1、普通选择器

2、属性选择器

3、伪类

注：link、visited、active、hover的顺序，为LoVe HAte

4、伪元素

三、一些注意

1、id选择器

www3school中所说：“一个id选择器 只能在一个文档中使用一次“，

但在css实践中你会发现 两个同样的id都会生效。

<style>
span{margin: 5px;}  
#my{background:red;}
</style>
  <span id="my">666</span>
  <span id="my">333</span>

执行结果为:

问：那为什么官方文档只让使用一次呢？

答：若使用两次，第一影响就是不能通过W3的校验。

在页面显示上，目前的浏览器css还都允许你犯这个错误，用多个相同ID“一般情况下”也能正常显示。

但是当你需要用JavaScript通过id来控制这个div，那就会出现错误。因为js里获取DOM是通过getElementById，而如果页面出现同一个id几次，这样就获取不到了。所以id要有唯一性。

2、多类选择器

类选择器很简单，那多类选择器呢？好好看下面的例子及注释。

www3school

例1：2个类

<style type="text/css">
.important {font-weight:bold;}
.warning {font-style:italic;}
/*.important和.warning之间不能有空格*/
/*.warning.important {background:silver;}颠倒顺序执行结果不变*/
.important.warning {background:silver;}
</style>
<p class="important">This paragraph is very important.</p>
<p class="warning">This is a warning.</p>
<p class="important warning">This paragraph is a very important warning.</p>

执行结果：

例2：3个类

注：如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败。

<style>
.important {font-weight:bold;}
.warning {font-style:italic;}
/*.important和.warning之间不能有空格*/
/*.warning.important {background:silver;}颠倒顺序执行结果不变*/
.important.warning {background:silver;}
</style>
<p class="important">This paragraph is very important.</p>
<p class="warning">This is a warning.</p>
<p class="important urgent warning">This paragraph is a very important warning.</p>

执行结果：同上

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

程序员编程交流QQ群：805358732

如果你想用Python开辟副业赚钱，但不熟悉爬虫与反爬虫技术，没有接单途径，也缺乏兼职经验
关注下方微信公众号：Python编程学习圈，获取价值999元全套Python入门到进阶的学习资料以及教程，还有Python技术交流群一起交流学习哦。