<!--注意在使用不同的结合方式时需要把其他的结合方式注释掉,或去掉要使用的方法的注释,不然看不出来效果 -->
<!--html文件 -->
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>html_css结合方式极其选择器</title>
<!--第2种结合方式 -->
<!-- <style type="text/css">
</style> -->
<!--第3种结合方式 -->
<link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
<!--结合方式:由上到下,由外到内,优先级由低到高,后加载的优先级高 -->
<div style="background: red; color: green;">第1种结合方式</div>
<div>第2种结合方式</div>
<div>第3种结合方式,标签选择器</div>
<div class="three">第3种结合方式,class选择器</div>
<div id="three">第3种结合方式,id选择器</div>
<!-- 选择器优先级:style > id选择器 > class选择器 > 标签选择器 -->
</body>
</html>
/* css文件 */
@CHARSET "UTF-8";
/* 标签选择器 */
div {
background: black;
color: purple;
}
/* class选择器 */
.three {
background: purple;
color: white;
}
/* id选择器 */
#three {
background: yellow;
color: red;
}