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

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

2024-09-11 01:06:32   228人阅读

　　一.外部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（内联）常见情况一览


联系
我们