| 选择器 | 作用 | 特征 | 使用情况 | 分隔符号及用法 |
|---|---|---|---|---|
| 后代选择器 | 用来选择后代元素 | 可以是祖孙后代 | 较多 | 空格.nav a |
| 子代选择器 | 选择最近一级元素 | 只选亲儿子 | 较少 | 大于.nav>p |
| 并集选择器 | 选择某些相同样式的元素 | 可以用于集体声明 | 较多 | 符号 .nav,.header （nav和header分别是两个元素） |
| 链接伪类选择器 | 选择不同状态的连接 | 跟连接相关 | 较多 | 重点记住a{}和a:hover实际开发的写法（鼠标经过某一元素） |
| :focus伪类选择器 | 选择获得贯标的表单 | 跟表单相关 | 较少 | input:focus （针对表单） |
后代选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 将所有ol内部的li选出，改为粉红色 */
ol li {
color: pink
}
ol li a {
color: red
}
/* 元素1 元素2 {样式生命} 后代选择器的使用办法 注意1. 元素1和元素2一定要用空格进行分割 2.选择ul里面的所有标签元素
3. 元素1是父本 元素2可以是儿子也可以是孙子等，只要是元素1的后代即可 */
</style>
</head>
<body>
<ol>
<li>我是ol的孩子</li>
<li>我是ol的孩子</li>
<li>我是ol的孩子</li>
<li>我是ol的孩子</li>
<li>我是ol的孩子</li>
<li>我是ol的孩子</li>
<li><a href="#">我是孙子</a></li>
</ol>
<ul>
<li>我是ul的大宝贝</li>
<li>我是ul的大宝贝</li>
<li>我是ul的大宝贝</li>
<li>我是ul的大宝贝</li>
<li>我是ul的大宝贝</li>
<li>我是ul的大宝贝</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>
.nav>a {
color: red;
}
</style>
</head>
<body>
<div class="nav">
<a href="#" class="href">我是儿子</a>
<p>
<a href="#" class="href">我是孙子</a>
</p>
</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>
/* 要求一 将熊大和熊二改为粉红色 */
/* 基本语法：元素2，元素2{样式声明} 注意:任何形式和选择器都可以作为并集选择器的一部分 */
/* div,
span {
color: red;
} */
/* 要求二 将熊大和熊二改成粉色并将小猪佩奇一家也改成粉红色 */
div,
p,
.pig li {
color: red;
}
</style>
</head>
<body>
<div>熊大</div>
<p>熊二</p>
<span>光头强</span>
<ul class="pig">
<li>小猪佩奇</li>
<li>猪爸爸</li>
<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>
/* 未访问过的链接 a:link*/
a:link {
color: black;
text-decoration: none;
}
/* 已经访问过的链接 */
a:visited {
color: orange;
}
/* 选择鼠标经过的那个链接 */
a:hover {
color: aqua;
}
/* 鼠标按下某一链接没松开的时候 */
a:active {
color: blueviolet;
}
</style>
</head>
<body>
<p><a href="#">小猪佩奇</a>
</p>
<a href="http://www.baidu.com">百度网站连接</a>
</body>
</html>
<!-- 链接伪类选择器注意事项
1. 伪类确保生效，请按照LVHA的循环顺序声明 link visited hover active
2. 记忆法：lave hate 或者lv包包hao
3. 因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独进行样式的指定 -->:focus伪类选择器
<!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>
input:focus {
background-color: aquamarine;
color: #888
}
</style>
</head>
<body>
<input type="text" class="type">
<input type="text" class="type">
<input type="text" class="type">
</body>
</html>
<!-- focus 用于选取获得焦点的表单元素 焦点就是光标，一般情况下，<input>类表单元素才能获取，因此这个选择器也主要针对于表单元素而言 -->
1406
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
