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