首页 > 代码库 > CSS优先级----ID,Class,style(内联)常见情况一览

CSS优先级----ID,Class,style(内联)常见情况一览

  一.外部CSS,内部CSS,内联CSS优先级

  1.内联CSS(声明在元素上“style=“*****””)  》  内部CSS(声明在head标签内的)  》  外部CSS(引用css文件)

 

  二.ID,Class,Style(内联)优先级

  1.3者的样式设置不冲突----------结论:3者的样式设置不重复,就会依照所有的样式去渲染元素,3者都采用。

        

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<STYLE TYPE="text/css">   
.testclass{      /*用来测试class的字体大小设置*/
    font-size:50px;
}
#testid{
    border:1px solid black;/*用来测试id的边框样式设置*/
}
</STYLE>
</head>
<body>
    <div id=‘grandfather‘ style="width:500px;height:500px;border:solid 2px red;position:absolute;top:5%;left:50%;margin-left:-250px;text-align: center;">
        
            <!--用来测试style(内联)的字体颜色设置-->
        <p id="testid" class="testclass" style="color:blue;">测试用例元素</p>
        
        
    </div>
</body>
</html>

 

  2.局部2者重复碰撞设置---------------结论:  style(内联样式)  》  ID  》Class

    ①class 和 id 冲突设置(重复设置的边框样式是按照id来渲染的)

    

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<STYLE TYPE="text/css"> 
/*用来测试class的边框样式(绿色)*/  
.testclass{
    border:1px solid green;                
}
/*用来测试id的边框样式(粉色)*/  
#testid{
    border:1px solid pink;
}
</STYLE>
</head>
<body>
    <div id=‘grandfather‘ style="width:500px;height:500px;border:solid 2px red;position:absolute;top:5%;left:50%;margin-left:-250px;text-align: center;">
        
    
        <p id="testid" class="testclass" style="color:blue;">测试用例元素</p>
        
        
    </div>
</body>
</html>

    ②class 和 style 冲突设置(重复的部分是按照style(内联)样式来渲染的)

  

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<STYLE TYPE="text/css"> 
/*用来测试class的字体样式(绿色)*/  
.testclass{
    color:green;                
}
/*用来测试id的边框样式(粉色)*/  
#testid{
    border:1px solid pink;
}
</STYLE>
</head>
<body>
    <div id=‘grandfather‘ style="width:500px;height:500px;border:solid 2px red;position:absolute;top:5%;left:50%;margin-left:-250px;text-align: center;">
        
        <!-- 用来测试style的字体颜色样式(黑色) -->
        <p id="testid" class="testclass" style="color:black;">测试用例元素</p>
        
        
    </div>
</body>
</html>

 

    ③id和style冲突设置(重复的部分是仍然是按style(内联样式)来渲染的)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<STYLE TYPE="text/css"> 
/*用来测试class的字体样式(绿色)*/  
.testclass{
    color:green;                
}
/*用来测试id的字体样式(粉色)*/  
#testid{
    color:pink;
}
</STYLE>
</head>
<body>
    <div id=‘grandfather‘ style="width:500px;height:500px;border:solid 2px red;position:absolute;top:5%;left:50%;margin-left:-250px;text-align: center;">
        
        <!-- 用来测试style的字体颜色样式(黑色) -->
        <p id="testid" class="testclass" style="color:black;">测试用例元素</p>
        
        
    </div>
</body>
</html>

 

  3.3者冲突测试-------------------结论:冲突部分按照style(内联样式)》ID》Class 来渲染,不冲突部分全部采用并渲染。

    ①3者全部冲突(按style》ID》Class 来渲染)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<STYLE TYPE="text/css"> 
/*用来测试class的字体样式(绿色)*/  
.testclass{
    color:green;                
}
/*用来测试id的字体样式(粉色)*/  
#testid{
    color:pink;
}
</STYLE>
</head>
<body>
    <div id=‘grandfather‘ style="width:500px;height:500px;border:solid 2px red;position:absolute;top:5%;left:50%;margin-left:-250px;text-align: center;">
        
        <!-- 用来测试style的字体颜色样式(黑色) -->
        <p id="testid" class="testclass" style="color:blue;">测试用例元素</p>
        
        
    </div>
</body>
</html>

    ③3者中部分冲突(重复部分按style》ID》Class来渲染,不冲突部分全部采用并渲染)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<STYLE TYPE="text/css"> 
/*用来测试class的字体样式(绿色)字体大小(60)*/  
.testclass{
    color:green;
    font-size:60px;                
}
/*用来测试id的字体样式(粉色)边框样式*/  
#testid{
    color:pink;
    border:2px solid black; 
}
</STYLE>
</head>
<body>
    <div id=‘grandfather‘ style="width:500px;height:500px;border:solid 2px red;position:absolute;top:5%;left:50%;margin-left:-250px;text-align: center;">
        
        <!-- 用来测试style的字体颜色样式(黑色) -->
        <p id="testid" class="testclass" style="color:blue;">测试用例元素</p>
        
        
    </div>
</body>
</html>

  4.一点细节:如果类似于border,里面有多部分组成(比如:2px solid black),这里面只有部分重复会怎么样(冲突部分按照style(内联样式)》ID》Class 来渲染,不冲突部分全部采用并渲染)

  

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<STYLE TYPE="text/css"> 
/*用来测试class的边框样式(2px solid red)*/  
.testclass{
    
    border:2px solid red;         
}
/*用来测试id的边框样式(2px solid blue)*/  
#testid{
    
    border:2px solid blue; 
}
</STYLE>
</head>
<body>
    <div id=‘grandfather‘ style="width:500px;height:500px;border:solid 2px red;position:absolute;top:5%;left:50%;margin-left:-250px;text-align: center;">
        
        <!-- 用来测试style的边框样式(2px solid green) -->
        <p id="testid" class="testclass" style="border:2px solid green; ">测试用例元素</p>
        
        
    </div>
</body>
</html>

 

  时间宝贵:  ①内联样式(style)》内部样式(在head内声明的样式)》外部样式(外部css文件)

         ②style,ID,Class 3者的样式冲突部分按照(style(内联样式)》ID》Class)渲染元素,不冲突部分全部采用并且渲染。

 

  tip:我写博客的目的只为学习记录和帮助和我一样的小菜鸟。我也水,不对的地方,请多指教。

    qq:2656062151  email:2656062151@qq.com

CSS优先级----ID,Class,style(内联)常见情况一览