建议收藏万字整理，一篇文章帮你掌握 Css 选择器

Posted 2021-12-06 余光、

【建议收藏】万字整理，一篇文章帮你掌握 Css 选择器

简介直观的 css 选择器，可以美化我们的代码，提高可读性，甚至对浏览器的 Css 解析也有帮助。本篇文章的灵感来自于CSS Diner——一个有趣的 css 选择器小游戏，借助下面的例子相信你一定能掌握 css 选择器的妙用，加油～

全篇文章共22个例子，分别使用了

1. 标签选择器
2. class
3. id
4. 伪元素
5. 伪类
6. 属性

篇幅较长，建议收藏

阅读指南

1. 先贴出选择器字典，帮助大家回忆基本的选择器含义
2. 阅读示例
3. 阅读代码，并完成题目（仅思考选择器部分）
4. 对照答案，并在评论区留下你的答案吧～

1、选择盘子(标签)

示例

• p => 选择所有<p>元素

代码

选择所有的plate标签

<div class="table">
  <plate />
  <plate />
</div>

答案

plate

2、选择小的那个(id)

示例

• #red => 选择id=red的标签

代码

选择小的盘子

<div class="table">
  <plate />
  <plate />
  <plate id="small" />
</div>

答案

#small

3、选择盘子中的苹果(标签组合)

示例

• div p => 选择所有的被 div 包裹的 p 标签

代码

选择盘子中的苹果

<div class="table">
  <bento />
  <plate>
    <apple />
  </plate>
  <apple />
</div>

答案

plate apple

4、选择小盘子中的苹果(id+标签)

根据元素的id和类型组合

示例

• p #small => 选择所有的 p 标签中 id=small 的标签

练习

<div class="table">
  <bento />
  <plate id="small">
    <apple />
  </plate>
  <plate>
    <apple />
  </plate>
  <apple />
</div>

答案

#small apple

5、选择小苹果(class)

根据元素的class

示例

• .warning => 选择所有 class=warning 的标签

练习

<div class="table">
  <apple />
  <apple class="small" />
  <plate>
    <apple class="small" />
  </plate>
  <plate />
</div>

答案

.small

6、选择小橘子(标签+class)

根据元素的类型+class选择

示例

• div.red => 选择所有的 class=red 的 div 标签

练习

<div class="table">
  <apple />
  <apple class="small" />
  <bento>
    <orange class="small" />
  </bento>
  <plate>
    <orange />
  </plate>
  <plate>
    <orange class="small" />
  </plate>
</div>

答案

orange.small

7、选择便当中的小橘子(组合)

根据元素的类型+class组合

示例

• div p.red => div 中的 class=red 的 p 标签

练习

选择盘子

<div class="table">
  <bento>
    <orange />
  </bento>
  <orange class="small" />
  <bento>
    <orange class="small" />
  </bento>
  <bento>
    <apple class="small" />
  </bento>
  <bento>
    <orange class="small" />
  </bento>
</div>

答案

bento orange.small

8、选择所有盘子和便当(标签)

根据元素的类型选择

示例

• div , p => 选择所有的 div 和 p 标签

练习

<div class="table">
  <pickle class="small" />
  <pickle />
  <plate>
    <pickle />
  </plate>
  <bento>
    <pickle />
  </bento>
  <plate>
    <pickle />
  </plate>
  <pickle />
  <pickle class="small" />
</div>

答案

plate, bento

9、选择所有的元素(通配符)

示例

• * => 选择所有的标签

练习

<div class="table">
  <plate />
  <plate />
  <orange />
  <orange />
</div>

答案

*

10、选择盘子里的所有(通配符组合)

练习

<div class="table">
  <plate id="fancy">
    <orange class="small" />
  </plate>
  <plate>
    <pickle />
  </plate>
  <apple class="small" />
  <plate>
    <apple />
  </plate>
</div>

答案

plate *

11、选择盘子旁边的苹果(+)

示例

• div + p =>选择所有紧跟在<div>元素之后的第一个<p>元素

练习

<div class="table">
  <bento>
    <apple class="small" />
  </bento>
  <plate />
  <apple class="small" />
  <plate />
  <apple />
  <apple class="small" />
  <apple class="small" />
</div>

答案

plate + apple

12、选择盘子内的苹果(>)

根据元素的类型选择

示例

• p > div => 选择所有的p标签内的直系div元素

练习

选择盘子

<div class="table">
  <plate>
    <bento>
      <apple />
    </bento>
  </plate>
  <plate>
    <apple />
  </plate>
  <plate />
  <apple />
  <apple class="small" />
</div>

答案

plate > apple

13、选择盘子内第一个的橘子(first-child)

示例

• p:first-child => 指定只有当<p>元素是其父级的第一个子级的样式。

练习

<div class="table">
  <bento />
  <plate />
  <plate>
    <orange />
    <orange />
    <orange />
  </plate>
  <pickle class="small" />
</div>

答案

orange: first-child;

14、选择小的的苹果和泡菜

根据元素的类型和 class 的组合，利用逗号分割

示例

• a, b => 选择所有的a标签和b标签
• a.red => 选择所有的class=red的a标签

练习

<div class="table">
  <plate id="fancy">
    <apple class="small" />
  </plate>
  <plate />
  <plate>
    <orange class="small" />
    <orange />
  </plate>
  <pickle class="small" />
</div>

答案

apple.small, pickle.small

15、选择第三个盘子

根据元素的顺序选择

示例

• p:nth-child(2) => 选择所有的p且是父级的第二个子元素

练习

<div class="table">
  <plate />
  <plate />
  <plate />
  <plate id="fancy" />
</div>

答案

plate: nth-child(3);

16、选择盘子中的第一个苹果

根据元素的在其父元素的位置选择

示例

• p:first-of-type => 选择每个p元素是其父级的第一个 p 元素

练习

<div class="table">
  <orange class="small" />
  <apple />
  <apple class="small" />
  <apple />
  <apple class="small" />
  <plate>
    <orange class="small" />
    <orange />
  </plate>
</div>

答案

apple.first-of-type

17、选择所有位置是偶数的盘子

示例

• p:nth-of-type(odd) => 选择器匹配同类型中的第奇数个同级兄弟元素。

练习

<div class="table">
  <plate />
  <plate />
  <plate />
  <plate />
  <plate id="fancy" />
  <plate />
</div>

答案

plate: nth-of-type(2n);
plate: nth-of-type(even);

18、选择盘子中唯一的那个苹果

示例

• p:only-of-type => 选择每个p元素是其父级的唯一p元素

练习

<div class="table">
  <plate id="fancy">
    <apple class="small" />
    <apple />
  </plate>
  <plate>
    <apple class="small" />
  </plate>
  <plate>
    <pickle />
  </plate>
</div>

答案

apple: only-of-type;

19、分别选择苹果和橘子中的最后一个

示例

• p:last-of-type => 选择每个p元素是其父级的最后一个 p``元素

练习

<div class="table">
  <orange class="small" />
  <orange class="small" />
  <pickle />
  <pickle />
  <apple class="small" />
  <apple class="small" />
</div>

答案

orange:last-of-type, apple:last-of-type

20、选择空的便当

示例

• p:empty => 选择每个没有任何子级的p元素（包括文本节点）

练习

<div class="table">
  <bento />
  <bento>
    <pickle class="small" />
  </bento>
  <plate />
  <bento />
</div>

答案

bento: empty;

21、选择拥有属性 for 的盘子

示例

• a[href] => 选择所有带有 href 属性的a元素

练习

<div class="table">
  <plate for="Sarah">
    <pickle />
  </plate>
  <plate for="Luke">
    <apple />
  </plate>
  <plate />
  <bento for="Steve">
    <orange />
  </bento>
</div>

答案

plate[for]

22、选择的给余光的盘子

示例

• [target=-blank] 选择所有使用target="-blank"的元素

练习

<div class="table">
  <apple for="yuguang" />
  <apple for="xiaoming" />
  <apple for="xiaowang" />
</div>

答案

apple[for="yuguang"]

🌈 写在最后

感谢阅读，希望能对你有所帮助，欢迎在评论区留言或在主页个人介绍中添加联系方式私聊我原创不易，「点赞」+「关注」+「收藏」 谢谢支持 ❤

系列回顾

1. CSS 基础：选择器的权重与优先级
2. CSS 基础：简述 CSS 盒模型
3. CSS 基础：浅谈 position 定位
4. CSS 基础：CSS 的上下文之 BFC
5. CSS 基础：CSS 的上下文之层叠上下文
6. CSS 进阶：弹性盒子 Flex
7. CSS 进阶：网格布局 Grid

墙裂推荐

1. JavaScript版LeetCode解析
2. 前端进阶笔记
3. 前端手撕代码系列