html_css結合方式以及選擇器
阿新 • • 發佈：2018-12-26
<!--注意在使用不同的結合方式時需要把其他的結合方式註釋掉,或去掉要使用的方法的註釋,不然看不出來效果 -->
<!--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;
}