css复合选择器分类
css复合选择器分为:后代选择器、子选择器、复合选择器、伪类选择器、:focus选择器
后代选择器:元素 下面包含的任意元素{…}
子选择器:元素 下面包含的第一层元素{…}
复合选择器:元素, 元素{…}
伪类选择器:主要用于链接,a:链接状态{…}
:focus选择器:跟表单有关,选择获得光标的表单,input:focus{…}
注意:a:link a:visited a:hover a:active 一定不能换顺序,否则样式不生效,可以4个不写全,实际中常用a {} a:hover{}定义链接样式。以及鼠标经过链接时的样式,即可
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css复合选择器</title>
<style>
/* 后代选择器 */
.fruit p {
color: pink;
}
.fruit li {
color: purple;
}
/* 子选择器 */
.fruit .youlike {
color: powderblue;
}
/* 并集选择器 */
.season,
.spring {
color: seagreen;
}
/* 链接伪类选择器 */
a:link {
color: seagreen;
}
a:visited {
color: sienna;
}
a:hover {
color: skyblue;
}
a:active {
color: brown;
}
</style>
</head>
<body>
<div class="carton">
<a href="#">海绵宝宝</a>
<ol>
<li><a href="#">小猪佩奇</a></li>
<li>熊大</li>
<li>熊二</li>
</ol>
</div>
<div class="fruit">
<p class="youlike">你喜欢的水果是?</p>
<ul>
<p class="ilike">我喜欢的水果是:</p>
<li>苹果</li>
<li>橙子</li>
<li>芒果</li>
<p>你呢?</p>
</ul>
</div>
<div>
<p class="season">你喜欢的季节是?</p>
<ul>
<p>我喜欢的季节是:</p>
<li class="spring">春</li>
<li class="summer">夏</li>
<li>秋</li>
<li>冬</li>
<p>你呢?</p>
</ul>
</div>
</body>
</html>