## id選擇器 #id{} ~~~css #div1{ color:red; } ~~~ ~~~ <div id="div1">haha</div> ~~~ <br> ## 類選擇器 .class{} ~~~css /* 除了第二個其他都會影響到 */ .div1{ font-size: 100px; } ~~~ ~~~ <div class="div1">我愛學前端</div> <div class="aaa">我愛學前端</div> <div class="div1">我愛學前端</div> <a class="div1">我愛學前端2</a> <a class="div1">我愛學前端2</a> <a class="div1">我愛學前端2</a> ~~~ <br> ## 標簽選擇器 div{} ~~~css /* 所有div都會變紅 */ div{ color:red; } ~~~ ~~~ <div>haha</div> <div>haha</div> <a>haha</a> ~~~ <br> ## 群組選擇器 #id, .class, div{} ~~~css /* 選擇器之間用逗號隔開，大家就是好兄弟，一起共享樣式，一起變紅 */ #div1, .div2{ color:red; } ~~~ ~~~ <div id="div1">haha</div> <div class="div2">haha</div> ~~~ <br> ## 后代選擇器 #id .class{} ~~~css /* 選擇器之間用空格隔開， 那就是后代關系，比如#div1包含.xx，就是后代關系，相當于選中#div1里面的.xx，所以只有第一個.xx的才變紅 */ #div1 .xx{ color:red; } ~~~ ~~~ <div id="div1"> <div class="xx">haha</div> </div> <div class="xx">haha</div> ~~~ <br> ## 通配符 *{} ~~~css /* 全部會變紅 */ * { color:red; } ~~~ ~~~ <div>haha</div> <a>haha</a> ~~~ <br> ## 子代選擇器 ~~~css /* 類似后代選擇器，但是只能匹配兒子 */ #div1 > .xx{ color:red; } ~~~ ~~~ <div id="div1"> <div class="xx">haha</div> </div> <div class="xx">haha</div> ~~~ <br>