基本选择器
类选择器 .
class属性的值与类选择器一一对应
ID选择器 #
id选择器的名字是唯一的，虽然两个一样的不报错，但不能那么写
通配符选择器 *
通配符选择器: 定位当前HTML页面中所有元素
* 应用: 用来设置当前HTML页面的默认样式
* 问题: 该选择器的性能不好
属性选择器 []
可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
层级选择器
HTML元素之间的关系分为三种：
- 父级与子级的关系：如下所示，<ul>元素是<li>元素的父级元素,那么<li>元素就是<ul>元素的子级元素。 <ul id="u1">
<li id="l1"></li>
</ul> - 兄弟之间的关系：如下所示，<ul>是两个<li>的父级，即两个<li>是<ul>的子级，那么两个<li>之间就是兄弟元素。 <ul id="u1">
<li id="l1"></li>
<li id="l2"></li>
</ul> - 祖先与后代之间的关系：如下所示，<div>是<ul>和<li>元素的祖先元素，那么<ul>和<li>就是<div>的后代元素 <div>
<ul id="u1">
<li id="l1"></li>
<li id="l2"></li>
</ul>
</div>
后代选择器
后代选择器包含该元素中所有包裹的元素 如下图所示：
<style>
.C {
width: 500px;
height: 300px;
}
.C1 {
width: 300px;
height: 200px;
}
.C2 {
width: 200px;
height: 100px;
}
/*
定位的是 .ancestor 的后代为 div 的元素
* 后代选择器包含该元素中所有包裹的元素
*/
.C div {
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="C">
18级启嘉班
<div class="C1">
19级启嘉班
<div class="C2">20级启嘉班</div>
</div>
</div>
</body>效果： C1和C2都是C的后代，所以C1和C2都有颜色
子级选择器
子级选择器 定位的是为子级的元素 如下所示：
?
<style>
.C { /*C的颜色覆盖区域*/
width: 500px;
height: 30px;
}
?
.C1 { /*C1的颜色覆盖区域*/
width: 300px;
height: 20px;
}
?
.C2 { /*C2的颜色覆盖区域*/
width: 200px;
height: 20px;
}
?
/*
定位的是 .C 的子级为 div 的元素
*/
.ancestor>div {
background-color: lightcoral;
}
</style>
</head>
?
<body>
<div class="C">
18级启嘉班
<div class="C1">
19级启嘉班
<div class="C2">20级启嘉班</div>
</div>
</div>
</body>效果： C的子级是C1所以，C1的地方有颜色
相邻兄弟选择器
相邻兄弟选择器(只能找后面的div，不能找前面的)如下所示
?
<style>
.C {
width: 500px;
height: 20px;
}
?
.C1 {
width: 300px;
height: 20px;
}
?
.C2 {
width: 200px;
height: 20px;
}
?
/*
定位的是 .C2 的子级为 div 的元素
*/
.C2+div {
background-color: lightcoral;
}
</style>
</head>
?
<body>
<div class="C">
18级启嘉班
<div class="C1">
19级启嘉班
<div class="C2">20级启嘉班</div>
<div class="C2">21级启嘉班</div>
<div class="C2">22级启嘉班</div>
</div>
</div>
</body>效果如下： 相邻兄弟选择器只能找后面的，C2相邻的是C3，所以C3有颜色
普通兄弟选择器
普通兄弟选择器 （找到后面所有的兄弟）
<style>
.C {
width: 500px;
height: 20px;
}
?
.C1 {
width: 300px;
height: 20px;
}
?
.C2 {
width: 200px;
height: 20px;
}
?
/* 定位的是 .C3 的后面兄弟为 div 的元素 */
.C3~div {
background-color: lightcoral;
}
</style>
</head>
?
<body>
<div class="C">
18级启嘉班
<div class="C1">
19级启嘉班
<div class="C2">20级启嘉班</div>
<div class="C3">21级启嘉班</div>
<div class="C4">22级启嘉班</div>
<div class="C5">23级启嘉班</div>
<div class="C6">24级启嘉班</div>
</div>
</div>
</body>效果：
并集选择器
给所有的选择器选中的标签设置属性。以","隔开,如下所示
?
<style>
/* 为 <h1> ~ <h4> 元素的文本内容设置相同颜色 */
/* h1 {
color: lightcoral;
}
?
h2 {
color: lightcoral;
}
?
h3 {
color: lightcoral;
}
?
h4 {
color: lightcoral;
}
*/
/* 通过并集选择器进行改写 */
h1,h2, h3, h4{
color: lightcoral;
}
</style>
?
<body>
<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四</h4>
</body>效果：h1~h4颜色相同，可以用并集选择器集合起来
交集选择器
<!DOCTYPE html>
<html lang="en">
?
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>交集选择器</title>
<style>
p {
color: lightcoral;
}
?
.cls {
color: lightskyblue;
}
?
/* 交集选择器 */
p.cls {
color: magenta;
}
</style>
</head>
?
<body>
<p>18级启嘉班</p>
<p class="cls">19级启嘉班</p>
<p>20级启嘉班</p>
<div class="cls">启嘉网</div>
</body>
?
</html>效果：交集改变了19级启嘉班的颜色
下一节更新CSS的其他的选择器