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

【建议收藏】万字整理，一篇文章帮你掌握 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>