1.简单选择器
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>选择器：简单选择器</title>
<style>
.container {
width: 300px;
height: 300px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
}
.item {
font-size: 2rem;
background-color: lightskyblue;
display: flex;
justify-content: center;
align-items: center;
}
/* 简单选择器 */
/* 元素选择器：标签选择器 */
body {
background-color: lightcyan;
}
/* 类选择器：对应着html标签中的class属性 */
.item {
border: 1px #000 solid;
}
/* 多个类复合应用 */
.item.center {
background-color: lightgreen;
}
/* id选择器 */
.item#first {
background-color: lightpink;
}
/* 层叠样式表，相同元素，后面追加的样式会覆盖前面的样式 */
#first {
background-color: yellow;
}
/* id,class可以添加到任何元素上，所以可以省略 */
/* * :属于元素级别 */
/* 元素<class<id */
</style>
</head>
<body>
<div class="container">
<div class="item" id="first">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item center">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2.上下文选择器
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>选择器：上下文选择器</title>
<style>
.container {
width: 300px;
height: 300px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
}
.item {
font-size: 2rem;
background-color: lightskyblue;
display: flex;
justify-content: center;
align-items: center;
}
/* 1.后代选择器 空格表示 */
.container div {
background-color: green;
}
/* 2.父子选择器 >表示 */
body > div {
border: 4px solid coral;
}
/* 3.同级相邻选择器 */
.item.center + .item {
background-color: red;
}
/* 4.同级所有选择器 */
.item.center ~ .item {
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item center">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
3.结构伪类选择器（不分组）
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>结构伪类选择器：不分组（不区分元素类型）</title>
<style>
.container {
width: 300px;
height: 300px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
}
.item {
font-size: 2rem;
background-color: lightskyblue;
display: flex;
justify-content: center;
align-items: center;
}
/* 匹配第一个子元素 */
.container > :first-child {
background-color: wheat;
}
/* 最后一个子元素 */
.container > :last-child {
background-color: lightpink;
}
/* 选择第三个 */
.container > :nth-child(3) {
background-color: lightgreen;
}
/* 只选择偶数单元格 */
.container > :nth-child(2n) {
background-color: white;
}
.container > :nth-child(Even) {
background-color: goldenrod;
}
/* 只选择奇数单元格 */
.contaiern > :nth-child(2n-1) {
background-color: lightslategray;
}
/* 奇数odd */
.container > :nth-child(odd) {
background-color: lightslategray;
}
/* 从指定位(第四个开始)置选 ,选择剩下的所以元素*/
.container > .item:nth-child(n + 4) {
background-color: rgb(117, 182, 224);
}
/* 只取前三个 ，表达式从0开始计算*/
.container > .item:nth-child(-n + 3) {
background-color: indigo;
}
/* 只取后三个 */
.container > .item:nth-last-child(-n + 3) {
background-color: lightseagreen;
}
/* 取第八个，用倒数的方式更直观又快 */
.container > .item:nth-last-child(2) {
background-color: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
3.结构伪类选择器（分组）
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>结构伪类选择器：分组</title>
<style>
.container {
width: 300px;
height: 300px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
}
.item {
font-size: 2rem;
background-color: lightskyblue;
display: flex;
justify-content: center;
align-items: center;
}
/* 分组结构伪类分二步：
1.元素按类型进行分组
2.在分组中根据索引进行选择 */
/* 拿到第一个 */
.container span:first-of-type {
background-color: gold;
}
/* 在分组中匹配任何一个 */
.container span:nth-of-type(3) {
background-color: hotpink;
}
/* 拿到前三个 */
.container span:nth-of-type(-n + 3) {
background-color: firebrick;
}
/* 拿到最后两个 */
.container span:nth-last-of-type(-n + 2) {
background-color: forestgreen;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<span class="item">4</span>
<span class="item">5</span>
<span class="item">6</span>
<span class="item">7</span>
<span class="item">8</span>
<span class="item">9</span>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
3.伪元素 :target, :not, :before, :after, :focus 示例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>伪类与伪元素</title>
<style>
#login-form {
display: none;
}
/* <!-- :target:必须与id配合，实现锚点操作 -- > */
/* 当前#login-form的表单元素被a的锚点激活的时候触发 */
#login-form:target {
display: block;
}
/* :focus: 当获取焦点的时候执行 */
input:focus {
background-color: gold;
}
/* ::selection:选中文本的前景色与背景色 */
input::selection {
color: #fff;
background-color: blue;
}
/* :not(): 选择不满足条件的元素 */
.list > *:not(:nth-of-type(3)) {
background-color: goldenrod;
}
/* ::before: */
.list::before {
content: "MENU";
color: goldenrod;
font-weight: bold;
font-size: 2rem;
border-bottom: 1px #dedede solid;
}
/* ::after */
.list::after {
content: "footer";
color: green;
font-weight: bold;
font-size: 2rem;
border-bottom: 1px green solid;
}
/* 伪元素前面是单冒号，伪类前面是单冒号 */
</style>
</head>
<body>
<!-- <a href="#login-form">
我要登录：
</a> -->
<button onclick="location='#login-form'">点击登录</button>
<form action="" method="post" id="login-form">
<label for="email"> 邮箱:</label>
<input type="email" name="email" id="email" />
<label for="password">密码:</label>
<input type="password" name="password" id="password" />
<button>登录</button>
</form>
<hr />
<ul class="list">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结通过学习选择器，全新认识了伪类，伪元素的应用，可以使代码变得更简洁，更易读；
知识点拓扑图：
