[C1进阶之路-Web基础] 基础选择器
目录
往期回顾，专栏一览
基础选择器
1、通配选择器
2、标签选择器
3、id选择器
4、类选择器
5、组合选择器
综合样例：
💬题目01
💬题目02
💬题目03
💬题目04
💬题目05
🍹欢迎各路大佬来到 Nick 主页指点
☀️本期文章将学习 [C1进阶之路-Web基础] 基础选择器，我是博主Nick。✨
✨我的博客主页：Nick_Bears 🌹꧔ꦿ
🌹꧔ꦿ博文内容如对您有所帮助，还请给个点赞 + 关注 + 收藏✨
🍋 注：资料来源于C1进阶考试资料
基础选择器
🍉 CSS（层叠样式表）选择器是CSS规则的一部分，用来指定需要设置样式的HTML元素。通过选择器可以实现CSS对HTML元素的一对一、一对多、多对一的控制。
| 选择器类型 | 描述 | 示例 |
|---|---|---|
| 通配选择器 | 通配选择器使用一个星号*表示，*会匹配所有元素 | * {color: red;} |
| 标签选择器 | 通过标签名匹配，匹配文档中所有为此标签名的元素 | p {color: red;} |
| id选择器 | 通过井号#来定义id选择器，根据元素的id属性匹配（精确匹配）元素 | #box { width: 300px;} |
| 类选择器 | 通过点.来定义类选择器，根据元素的class属性匹配（精确匹配）元素 | .container {height: 100px;} |
| 组合选择器 | 包括四种组合方式：后代选择器、子代选择器、相邻选择器、兄弟选择器 | #box>.nav p {color: blue;} |
1、通配选择器
可以与其他选择器相结合，选择某元素下的所有元素
/*选择类名为box的元素的所有后代，添加一个黑色的字体颜色*/
.box * { color: #000; }
由于每个浏览器对元素的默认边距不一致，通配选择器常用于reset样式文件中，覆盖浏览器的默认样式
* {margin: 0;padding: 0;border: 0;
}
2、标签选择器
标签选择器也常用于
reset样式文件中，用于清除元素的默认样式，如li标签的小圆点、a标签的下划线等
3、id选择器
id属性的属性值应当是当前文档唯一
4、类选择器
class属性值在文档中可以重复
5、组合选择器
通过间隔符将基础选择器连接起来，实现组合选择的效果
| 选择器 | 间隔符 | 描述 |
|---|---|---|
| 后代选择器 | 空格 | 选取该元素的后代元素 |
| 子代选择器 | > 大于号 | 选择该元素的第一级子元素 |
| 相邻选择器 | + 加号 | 选择该元素之后相邻第一个元素，且两者具有相同的父元素 |
| 兄弟选择器 | ~ 波浪号 | 选择该元素之后的同层级元素 |
综合样例：
Nick的笔记- Nick爱跑步
- Nick爱学习
- Nick爱编程
- Nick考C1
┭┮﹏┭┮ 不能摆烂
💬题目01
📝 想要选择ol元素的子代li元素，并设置字体和字体颜色样式，请补齐这段代码
- 菜单1
- 菜单2
- 菜单3
- Coffee
- Tea
- Milk
key：ol>li
使用子代选择器，可以选取该元素的所有子代元素
💬题目02
📝 现有以下代码，要求使用
类选择器选择内容为CSDN能力认证中心的p元素，并为其设置样式，补全代码片段CSDN能力认证中心
key：.title
在CSS选择器中，类选择器使用点
.加类名的形式选择元素
💬题目03
📝 现有以下代码片段，要求使用
id选择器选择内容为CSDN能力认证中心的span元素，补全代码片段CSDN能力认证中心
key：#title
在CSS选择器中，id选择器使用井号
#加id名的形式选择元素
💬题目04
📝 现需要重置浏览器样式，将全部元素的
border/padding/margin都设置为0，请补全代码片段___ {border: 0;padding: 0;margin: 0; }
key：*
在CSS选择器中，使用
通配选择器能够选中页面当中的所有元素，并给这些元素设置样式
💬题目05
📝 现有以下代码，需要将「CSDN能力认证中心」之后的所有
p元素字体颜色设置为红色CSDN能力认证中心
C1见习能力认证
C4专项能力认证
C5全栈能力认证
key：~
在CSS选择器中，使用
兄弟选择器能够选中该元素之后的所有同级元素，并给这些元素设置样式
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！