首页 > 代码库 > 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(内联)常见情况一览