一、常用的基本选择器：
| 标签选择器 | 根据标签的名称获取 |
| id选择器 | 获取的ID属性 |
| 类选择器 | class属性 |
(注：id属性唯一，class不唯一）
标签选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul li {
color: red;
}
</style>
</head>
<body>
<ul type="none">
<li>剧情简介</li>
<li>演员表</li>
<li>人物结局</li>
<li>人物关系表</li>
</ul>
</body>
</html>
运行结果：
id选择器：
（注：id选择器前记得加#）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#text{
color: red;
}
</style>
</head>
<body>
<ul type="none">
<li id="text">剧情简介</li>
</ul>
</body>
</html>
运行结果：
类选择器：
（注：类选择器前加.）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.one{
color: red;
}
</style>
</head>
<body>
<ul type="none">
<li class="one">剧情简介</li>
</ul>
</body>
</html>
运行结果：
二、常用的复合选择器：
| 子代选择器 | 选择某个元素的直接子元素 |
| 后代选择器 | 选择某个元素的后代元素 |
| 分组选择器 | 可以同时设置多个标签 |
| 相邻兄弟选择器 | 选择紧接在另一个元素后面的元素 |
子代选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul>li{
border: 1px solid red;
}
</style>
</head>
<body>
<ul>
<li>剧情简介</li>
</ul>
</body>
</html>
运行结果：
后代选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.list li{
border:1px solid red;
}
</style>
</head>
<body>
<div class="list">
<ul type="none">
<li class="one">剧情简介</li>
</ul>
</div>
</body>
</html>
运行结果：
分组选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.list,.one{
border:1px solid red;
}
</style>
</head>
<body>
<div class="list">内容</div>
<ul type="none">
<li class="one">剧情简介</li>
</ul>
</body>
</html>
运行结果：
相邻兄弟选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h3+p{color: red; }
</style>
</head>
<body>
<h3>侧边栏</h3>
<p>各演员信息</p>
</body>
</html>
运行结果：
（注：作者下一篇有应用的例子）
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
