标签:程序员 选择 示例 防止 冲突 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