前端样式之元素选择器 - html+css

首页 > 博客列表 > 前端样式之元素选择器

博主信息

博文 4

粉丝 0

访问量 7726

专题推荐

更多>

简单的选择器

场景↓

<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选择器
相同元素，后面追加的样式会覆盖前面的样式
开发中伪类选择器应结合实际情况选择使用分组或者不分组伪类选择器

批改老师：

灭绝师太

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

1条评论

灭绝师太 2020-07-18 15:36:55

总结得很细也很全，css3新增的一些动画样式，可以去研究下，很有意思。

1楼

作者最新博文

VSCode编辑器和phpStudy的安装与配置

2020-07-17 22:21:29