<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>css的进阶</title>
</head>
<body>
<!-- 复合选择器
定义:由两个或多个基础选择器,通过不同的方式组合而成
作用:更准确,更高效的选择目标元素(标签)
1.后代选择器:选中某元素的后代元素
选择器写法:父选择器 子选择器{CSS属性},父子选择器之间用空格隔开
<div>
<span>这是在div里面的(儿子)span</span>
<p>
<span>这是在div里面的p里面的(孙子)span</span>
</p>
</div>
<style>
div span{
color: red;
}
</style>
2.子代选择器:选中某元素的子代元素(最近的子级)
选择器写法:父选择器>子代选择器{CSS属性},父选择器之间用 > 隔开
<div>
<span>这是在div里面的(儿子)span</span>
<p>
<span>这是在div里面的p里面的(孙子)span</span>
</p>
</div>
<style>
/* 子代选择器 儿子变红,孙子不变*/
div > span{
color: red;
}
</style>
3.并集选择器:选中多组标签设置相同的样式
选择器写法:选择器1,选择器2,...选择器N{CSS},选择器之间用,隔开
<div>
<span>这是在div里面的(儿子)span</span>
<p>
<span>这是在div里面的p里面的(孙子)span</span>
</p>
</div>
<p>p</p>
<span>span</span>
<style>
p,div,span{
color:red;
}
</style>
4.交集选择器:选中同时满足多个条件的元素
选择器写法:选择器1选择器2{CSS属性},选择器之间连写,没有任何符号
需求:只想修改 box类的p标签
<p> class ='box'> p标签用了类选择器 box </p>
<p> p标签 </p>
<div class ='box'> div 标签,使用了类选择器 box </div>
<style>
p.box{
color:red;
}
</style>
注意:如果交集选择器中有标签选择器,标签选择器必须书写在最前面
-->
<!-- 伪类选择器
伪类选择器:伪类选择器元素状态,选中元素的某个状态设置样式
鼠标悬停状态:选择器:hover{CSS属性}
任何标签都可以设置鼠标悬停的状态
a:hover{
color: aqua;
}
伪类-超链接
超链接一共有四个状态
:link :访问前
:visited :访问后
:hover :鼠标悬停
:active :点击时(激活)
提示:如果要给超链接设置以上四个状态,需要按LVHA顺序书写
-->
<h2 color="red">红</h2>
<div>
<span>这是在div里面的(儿子)span</span>
<p>
<span>这是在div里面的p里面的(孙子)span</span>
</p>
</div>
<p>p</p>
<span>span</span>
<a href="#">超链接</a>
<div class="box">div</div>
<style>
/* 后代选择器 儿子和孙子都变红*/
/* div span{
color: red;
} */
/* 子代选择器 儿子变红,孙子不变*/
/* div > span{
color: red;
} */
/* 并集选择器 */
/* p,div,span{
color:red;
} */
/* 伪类选择器 */
/* a:hover{
color: aqua;
}
.box:hover{
div:hover 也可以
color: blueviolet;
} */
/* 超链接伪类选择器 */
/* 访问前 */
a:link{
color: red;
}
/* 访问后 */
a:visited{
color: green;
}
/* 鼠标悬停 */
a:hover{
color: blue;
}
/* 点击时 */
a:active{
color: orange;
}
</style>
</body>
</html>