标签：程序员 选择 示例 防止 冲突 size 常用 for style
div{ ..........样式 } <div>.......</div>
<div>.......</div>
这种选择器的影响范围大，一般情况下不会单独使用，会应用到层级选择器中。
#box{ .......样式 } <div id="box">....</div>
这种一般也不用，留给程序员。
.red{样式} .big{样式} <div class="red">....</div> <h1 class="red big">....</h1> <p class="red mt10">....</p>
通过类名选择元素，可以多选，应用比较灵活，可以重用，是应用最多的选择器。
.box div{样式} <div class="box"> <div>....</div> </div>
选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，防止命名冲突。注意，每个层级之间是用空格分开的，而不是用逗号。
.box1,.box2,.box3{样式} <div class="box1">....</div> <div class="box2">....</div> <div class="box3">....</div>
如果多个标签有同样的样式可以用组选择器。注意，组之间是用逗号分开的，这里一定要和层级选择器做对比不要弄混。
.box1:hover{样式} .box2:before{样式} .box3:after{样式} <div class="box1">....</div> <div class="box2">....</div> <div class="box3">....</div>
常用的伪类选择器hover，伪元素是before，after。
标签：程序员 选择 示例 防止 冲突 size 常用 for style
原文地址：https://www.cnblogs.com/xzk666/p/10153131.html
