【建议收藏】万字整理,一篇文章帮你掌握 Css 选择器
简介直观的 css 选择器,可以美化我们的代码,提高可读性,甚至对浏览器的 Css 解析也有帮助。本篇文章的灵感来自于
CSS Diner
——一个有趣的 css 选择器小游戏,借助下面的例子相信你一定能掌握 css 选择器的妙用,加油~
全篇文章共22个例子,分别使用了
- 标签选择器
- class
- id
- 伪元素
- 伪类
- 属性
篇幅较长,建议收藏
阅读指南
- 先贴出选择器字典,帮助大家回忆基本的选择器含义
- 阅读示例
- 阅读代码,并完成题目(仅思考选择器部分)
- 对照答案,并在评论区留下你的答案吧~
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>