【CSS选择器】

一、优先级

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

同一级别：后写的会覆盖先写的样式

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

 <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引入方式优先级：内联(行内)样式 > 内部样式表 > 外部样式表 

import指令导入。其中： url函数，样式文件地址
<style type="text/css">
    @import url("css/my.css");
</style>

二、选择器

多类选择器

<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>

执行结果： 

 

1、普通选择器

3、伪类

4、伪元素

博客链接：