<!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>
360
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
