css的样式和选择符的优先权

时间:2019-08-14
本文章向大家介绍css的样式和选择符的优先权,主要包括css的样式和选择符的优先权使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

样式优先权:

1.内联式【行内样式】——>内嵌式【内部式】——>外链式【外部式】——>@import url导入式

//内联式(行内样式):
    <p style="color:green;font-size:40px;">第一段</p>

//内嵌式(内部式):
    <style type="text/css">
        h1{font-size:30px;color:gold;}
        .content{line-height:2em;color:blue;font-size:15px;}
        .bigText{font-size:25px;}
        #play{color:red}
    </style> 

//外链式(外部式):
    <link href="style.css" rel="stylesheet" type="text/css">

//导入式:
    <style type="text/css">
        @import url("style.css");
    </style> 
  

内嵌式【内部式】,外链式【外部式】 这两种用的最多

2.css优先权:就近原则(同一个页面内,越往后的样式优先度越高,会覆盖前面的样式)

  作用范围越小,优先权越高;

  离要修饰的目标距离越近的样式优先权越高;

选择符优先权:

1.行内——>id——>class——>标签选择符

我们可以采用  !important  语法来提升优先权

p{

  color:red !important; //IE6不支持该语句

  color:blue;  

}

原文地址:https://www.cnblogs.com/slsddy/p/11348322.html