【建议收藏】万字整理,一篇文章帮你掌握 Css 选择器
source link: https://blog.csdn.net/jbj6568839z/article/details/120142598
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
【建议收藏】万字整理,一篇文章帮你掌握 Css 选择器
简介直观的 css 选择器,可以美化我们的代码,提高可读性,甚至对浏览器的 Css 解析也有帮助。本篇文章的灵感来自于
CSS Diner
——一个有趣的 css 选择器小游戏,借助下面的例子相信你一定能掌握 css 选择器的妙用,加油~
全篇文章共22个例子,分别使用了
- 标签选择器
- class
篇幅较长,建议收藏
- 先贴出选择器字典,帮助大家回忆基本的选择器含义
- 阅读代码,并完成题目(仅思考选择器部分)
- 对照答案,并在评论区留下你的答案吧~
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"]
🌈 写在最后
感谢阅读,希望能对你有所帮助,欢迎在评论区留言或在主页个人介绍中添加联系方式私聊我原创不易,「点赞」+「关注」+「收藏」 谢谢支持 ❤
系列回顾
其他沉淀
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK