目录
基础选择器
| 选择器类型 | 描述 | 示例 |
|---|---|---|
| 通配选择器 | 通配选择器使用一个星号*表示，*会匹配所有元素 | * {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; }
* {
margin: 0;
padding: 0;
border: 0;
}
2、标签选择器
3、id选择器
4、类选择器
5、组合选择器
| 选择器 | 间隔符 | 描述 |
|---|---|---|
| 后代选择器 | 空格 | 选取该元素的后代元素 |
| 子代选择器 | > 大于号 | 选择该元素的第一级子元素 |
| 相邻选择器 | + 加号 | 选择该元素之后相邻第一个元素，且两者具有相同的父元素 |
| 兄弟选择器 | ~ 波浪号 | 选择该元素之后的同层级元素 |
综合样例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*
选择器名：{
属性：属性值
}
*/
/* 通配选择器 */
* {
color:red;
}
/* 元素选择器 */
a{
text-decoration: none;
}
/* 类选择器 */
.p1{
color: blue;
}
/* id选择器 */
#box{
border: 1px solid green;
}
/* 子代选择器：div下第一代a */
#box>a{
color: pink;
}
/* 兄弟选择器：当前下一个+,所有~ */
#target~li{
color: #008000;
}
</style>
</head>
<body>
<div id="box">
<a href="#">Nick的笔记</a>
<ul>
<a href="#">Nick的笔记</a>
<li id="target">Nick爱跑步</li>
<li>Nick爱学习</li>
<li>Nick爱编程</li>
<li>Nick考C1</li>
</ul>
<p class="p1">
┭┮﹏┭┮ 不能摆烂
</p>
</div>
</body>
</html>
💬题目01
💬题目02
💬题目03
💬题目04
💬题目05
