css选择器

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。