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%;lef
t:50%;margin-left:-250px;text-align: center;">    <!--⽤来测试style（内联）的字体颜⾊设置-->
<p id="testid" class="testclass" >测试⽤例元素</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' > <p id="testid" class="testclass" >测试⽤例元素</p>
</div>
</body>
</html>
    ②class 和 style 冲突设置（重复的部分是按照style（内联）样式来渲染的）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<STYLE TYPE="text/css">
css样式表优先级最高/*⽤来测试class的字体样式（绿⾊）*/
.testclass{
color:green;
}
/*⽤来测试id的边框样式（粉⾊）*/
#testid{
border:1px solid pink;
}
</STYLE>
</head>
<body>
<div id='grandfather' > <!-- ⽤来测试style的字体颜⾊样式（⿊⾊） -->
<p id="testid" class="testclass" >测试⽤例元素</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的字体颜⾊样式（⿊⾊） -->
<p id="testid" class="testclass" >测试⽤例元素</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的字体颜⾊样式（⿊⾊） -->
<p id="testid" class="testclass" >测试⽤例元素</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的字体颜⾊样式（⿊⾊） -->
<p id="testid" class="testclass" >测试⽤例元素</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的边框样式（2px solid green） -->
<p id="testid" class="testclass" >测试⽤例元素</p>
</div>
</body>
</html>
  时间宝贵:  ①内联样式（style）》内部样式（在head内声明的样式）》外部样式（外部css⽂件）
        ②style，ID，Class 3者的样式冲突部分按照（style（内联样式）》ID》Class）渲染元素，不冲突部分全部采⽤并且渲染。
  tip：我写博客的⽬的只为学习记录和帮助和我⼀样的⼩菜鸟。我也⽔，不对的地⽅，请多指教。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。