前端样式之元素选择器

简单的选择器

场景↓

<body>
  <div class="container">
    <div class="item" id="first">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item center">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
  </div>
</body>

元素选择器

标签选择器，如body、div等等
```
body {
    }
div{
    }
```

类选择器

对应着html中的class属性，如class=”item”
```
.item {
    }
```
多个类复合应用，如class=”item center”
```
.item.center{
    }
```

id选择器

如id=”first”
```
#first {
    }
```

简单选择器的优先级

id > class > 元素

上下文选择器

场景↓

<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item center">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
  </div>
</body>

后代选择器

选择标签或类下所有的标签或类，如选择body下的所有div
```
body div {
    }
```

父子选择器

选择标签或类下一级的标签或类，如选择body下一级div
```
body > div {
    }
```

同级相邻选择器

选择类同级的下一个类，如选择class=”item center”下一个class=”item”
```
.item.center + .item {
    }
```

同级所有选择器

选择类同级后面所有的类，如选择class=”item center”后面所有的class=”item”
```
.item.center ~ .item {
    }
```

伪类选择器

不分组的伪类选择器

场景↓

<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
  </div>
</body>

选择第一个子元素

.container > *:first-child {
    }

或者

.container > .item:first-child {
    }

选择最后一个子元素
```
.container > :last-child {
    }
```
选择指定个数元素，如第3个元素
```
.container > :nth-child(3) {
    }
```

只选择偶数单元格元素

.container > :nth-child(2n) {
    }

或者

.container > :nth-child(even) {
    }

只选择奇数单元格元素

.container > :nth-child(2n-1) {
    }

或者

.container > :nth-child(odd) {
    }

从指定位置(如从第4个元素开始)，选择剩下的所有元素
```
.container > .item:nth-child(n + 4) {
    }
```

只取前几个元素（如只取前3个元素）

.container > .item:nth-child(-n + 3) {
    }

只取最后几个元素（如只取最后3个元素）

.container > .item:nth-last-child(-n + 3) {
    }

取倒数第几个元素（如取倒数第2个元素）
```
.container > .item:nth-last-child(2) {
    }
```

分组的伪类选择器

元素按类型进行分组
在分组中根据索引进行选择

场景↓

<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <span class="item">4</span>
    <span class="item">5</span>
    <span class="item">6</span>
    <span class="item">7</span>
    <span class="item">8</span>
    <span class="item">9</span>
  </div>
</body>

选择div组中的第一个元素
```
.container div:first-of-type {
    }
```
选择div组中的最后一个元素
```
.container div:last-of-type {
    }
```
选择span组中的指定一个元素，如选择第3个元素
```
.container span:nth-of-type(3)  {
    }
```
选择span组中的前几个元素，如选择前3个元素
```
.container span:nth-of-type(-n + 3)  {
    }
```
选择span组中的最后几个元素，如选择最后2个元素
```
.container span:nth-last-of-type(-n + 3)  {
    }
```

总结

id选择器的应用场景目前只有二种场景：表单元素，锚点，开发中css样式尽量使用类选择器不要使用id选择器
相同元素，后面追加的样式会覆盖前面的样式
开发中伪类选择器应结合实际情况选择使用分组或者不分组伪类选择器

简单的选择器

元素选择器

类选择器

id选择器

简单选择器的优先级

上下文选择器

后代选择器

父子选择器

同级相邻选择器

同级所有选择器

伪类选择器

不分组的伪类选择器

分组的伪类选择器

总结

相关文章