## 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>