目录
一.基本选择器：
1.标签选择器
| 标签选择器 | 用标签名称作为选择器，为对应标签名的元素设置样式 |
示例效果
<h2 style="color: red;">选择器</h2>运行效果
2.类选择器
| 类选择器 | 用class名作为选择器，为指定class名的元素设置样式 在head标签里面，添加style标签，然后在class名前加(.)即可以使用类选择器 |
示例效果
<style>
.xzq{
color: aqua;
}
</style>
</head>
<body>
<h2 class="xzq">选择器</h2>
</body>运行效果
3.id选择器
| id选择器 | 用id名作为选择器，为指定id的元素设置样式， 在head标签里面，添加style标签，然后在class名前加(#)即可以使用id选择器（注意id名是唯一的） |
示例效果
<style>
#xzq{
color: green;
}
</style>
</head>
<body>
<h2 id="xzq">id选择器</h2>
</body>运行效果
二.选择器的复合：
1.交集选择器
| 交集选择器 | 两个选择器直连；第一个必须是标签选择器，第二个必须是类选择器或者id选择器，且选择器之间不能有空格。 |
类选择器的示例效果
<style>
h2.tll{color: brown;
}
</style>
</head>
<body>
<h2 class="tll">天亮了</h2>
<h2 class="tll">天暗了</h2>
<h2 class="tll1">晚上了</h2>
</body>运行效果
h2.tll表示选择类名为tll的h2标签
id选择器的示例效果
<style>
h2#tll{color: blue;
}
</style>
</head>
<body>
<h2 id="tll">写作业</h2>
<h2 id="tll">玩手机</h2>
<h2 id="wl">完啦</h2>
</body>运行效果
h2.tll表示选择id为tll的h2标签
2.交集选择器
| 交集选择器 | 即多个选择器写在一起（用逗号隔开），使用相同的样式效果 |
示例效果
<style>
p.xzq,#xzq1{
color: blue;
}
</style>
</head>
<body>
<p class="xzq">选择器</p>
<h2 id="xzq1">选择器1.0</h2>
</body>运行效果
3.关系选择器 （重点）
a.后代选择器（可跨代）
| 后代选择器（可跨代） | 选择被嵌套的标签，选择器之间用空格来隔开 |
示例效果
<style>
ol ul{
color:brown;
}
</style>
</head>
<body>
<ol>
<li>我来了</li>
<ul>
<li>我到了</li>
<p>提出</p>
</ul>
<li>我走了</li>
</ol>
</body>运行效果
ol ul 表示的是嵌套在ul中的ul标签的样式效果
b.子代选择器（不可跨代）
| 子代选择器（不可跨代） | 选择被嵌套的标签，选择器之间用大于号(>)来隔开 |
示例效果
<style>
ol>ul>.we{
color:green;
}
</style>
</head>
<body>
<ol>
<li>我来</li>
<ul>
<li class="we">我到</li>
<p class="we">提出了</p>
<p>嗡嗡嗡</p>
</ul>
<li>我走</li>
</ol>
</body>运行效果
ol>ul>.we表示嵌套在ol的ul标签中的类名为we的样式效果
c.相邻兄弟选择器（相邻且顺序的同级）
| 相邻兄弟选择器 （相邻且顺序的同级） | 选择被嵌套的标签，选择器之间用+来隔开 |
示例效果
<style>
li+ul{
color: red;
}
</style>
</head>
<body>
<ol>
<li>来</li>
<ul>
<li class="we">到</li>
<p class="we">出了</p>
<p>嗡嗡嗡</p>
</ul>
<li>走</li>
</ol>
</body>运行效果
li+ul表示嵌套在li的ul标签中的所有样式效果
d.通用兄弟选择器 （有没有顺序都不重要）
| 通用兄弟选择器 （有没有顺序都不重要） | 选择被嵌套的标签，选择器之间用~来隔开 |
示例效果
<style>
li~ul{
color: red;
}
</style>
</head>
<body>
<ol>
<li>来</li>
<ul>
<li class="we">到</li>
<p class="we">出了</p>
<p>嗡嗡嗡</p>
</ul>
<li>走</li>
</ol>运行效果
li~ul表示嵌套在li的同级ul标签中的所有样式效果
感谢观看
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
