<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
/*<!--id 選擇器-->*/
#i1 {
background-color: burlywood;
height: 48px;
}
/*class選擇器*/
.c {
background-color: red;
height: 48px;
}
.c2 {
background-color: blue;
height: 48px;
}
/*標簽選擇器*/
span {
background-color: yellowgreen;
height: 48px;
}
a {
background-color: blue;
height: 48px;
}
/*層級選擇器（中間有空格）*/
div span {
background-color: black;
color: white;
height: 48px;
}
.c2 div {
background-color: yellow;
font-size: 45px;
color: red;
height: 48px;
}
.c2 div div {
background-color: yellow;
color: black;
height: 48px;
}
/*組合選擇器（用逗號隔開）*/
#i5, #i6, #i7, .c3, .c4 {
background-color: yellow;
color: blue;
height: 48px;
}
/*屬性選擇器*/
input[type='text'] {
width: 100px;
height: 200px;
}
/*對選擇到的標簽再通過屬性再進行一次篩選*/
.c1[type='username'] {
width: 200px;
height: 200px;
}
</style>
<body>
<!--/* 第一種 在標簽里面加style屬性*/-->
<div style="background-color: burlywood;height: 200px;">ffffffff</div>
<!--/* 第二種 在title下面加入style屬性，里面給對應id設定style屬性，比如下面這個標簽為#i1，
那么就會使用上面設定的style,但是每個標簽的ID都是唯一的，所以這種方法不太使用，如果要設置多個標簽的style那么就要寫多個id選擇器*/-->
<div id="i1">id選擇器</div>
<!--/* 第三種 在style標簽里面加入class選擇器設定style屬性，標簽用的時候方法如下
同一個class選擇器可以被多個標簽應用，這種方法比較廣泛*/-->
<div class="c">class選擇器1</div>
<div class="c">class選擇器2</div>
<div class="c2">class選擇器3</div>
<!--/* 第四種 標簽選擇器，在style標簽里面寫對應標簽模式的style，那么之后所有的這個模式都會使用此style*/-->
<span>標簽選擇器1</span>
<span>標簽選擇器2</span>
<a href="https://www.duba.com">標簽選擇器3</a>
<!--/* 第五種 關聯選擇器（層級選擇器）*/-->
<div>
<span>關聯選擇器</span>
</div>
<!--/* 或者 關聯選擇器第二種形式*/-->
<div class="c2">
<div>關聯選擇器第二種形式</div>
</div>
<div class="c2">
<div>
<div>3層升入</div>
</div>
</div>
<!--/* 第六種 組合選擇器*/-->
<div id="i5">組合選擇器1</div>
<div id="i6">組合選擇器2</div>
<div id="i7">組合選擇器3</div>
<div class="c3">組合選擇器4</div>
<div class="c4">組合選擇器5</div>
<div></div>
<!--/* 第七種 屬性選擇器*/-->
<input class="c1" type="text" name="username"/>
<input class="c1" type="password"/>
</body>
</html>
