复合选择器
1.1 什么是复合选择器
- CSS中，更具选择器类型把选择器分为： 基础选择器 和 复合选择器。
- 复合选择器可以更准确，高效的选择目标元素
- 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成。
- 常用的复合选择器：后代选择器、子选择器、并集选择器、伪类选择器等。
1.2 后代选择器
<style>
ol li {
color: pink;
}
ol li a {
color: brown;
}
.nav li a {
color: yellow;
}
</style>
</head>
<body>
<ol>
<li>我是ol的还在</li>
<li>我是ol的还在</li>
<li>我是ol的还在</li>
<li>我是ol的还在</li>
<li><a href="#">我是ol的孙子</a></li>
</ol>
<ul class="nav">
<li><a href="#">我是ul的还在</a></li>
<li>我是ul的还在</li>
<li>我是ul的还在</li>
<li>我是ul的还在</li>
</ul>
</body>
1.3 子选择器
只选择作为某元素的最近一级子元素，简单理解就是选择亲儿子元素。
<style>
.nav>a {
color: rgb(247, 3, 3);
}
</style>
</head>
<body>
<div class="nav">
<a href="#"> 我是儿子</a>
<p>
<a href="#">我是孙子</a>
</p>
</div>
</body>
1.3 并集选择器
可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。
<style>
/* 把胸大熊二改为粉丝 */
div,
p {
color: pink;
}
/* 把熊大熊二改成粉色 还要小猪一家改为粉色 */
div,
p,
.pig li {
color: pink;
}
</style>
</head>
<body>
<div>熊大</div>
<p>熊二</p>
<span>光头强</span>
<ul class="pig">
<li>小猪佩奇</li>
<li>猪爸爸</li>
<li>猪妈妈</li>
</ul>
</body>
1.5 伪类选择器
用于向某些选择器添加特殊效果，比如给链接添加特殊效果，或选择第1个、第n个元素。
1.6 链接伪类选择器
<style>
/* 未访问的链接 */
a:link {
color: rgb(0, 0, 0);
}
/* 选择点击过的链接 */
a:visited {
color: royalblue;
}
/* 选择鼠标经过的链接 */
a:hover {
color: pink;
}
/* 鼠标点击未松开的时候 */
a:active {
color: skyblue;
</style>
</head>
<body>
<a href="#">小猪佩奇</a>
</body>
- 链接伪类选择器的注意事项
- 链接伪类选择器实际开发中的写法
1.7 focus 伪类选择器
用于选取获得焦点的表单元素。
有光标的地方。
style>
input:focus {
background-color: pink;
}
</style>
<body>
<input type="text">
<input type="text">
<input type="text">
</body>