CSS之其他选择器
程序员文章站
2022-05-28 09:03:47
...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*后代选择器 只要包含该对象即可*/
div span{
font-size: 25px;
font-family: "微软雅黑";
color: green;
}
/*子选择器 直系子标签*/
div>span{
color: red;
}
/*兄弟选择器 只会改变下面相邻的约束对象*/
#p01+p{
color: yellow;
}
/*兄弟选择器 后面所有的兄弟对象都会改变*/
#p01~p{
color: darkcyan;
font-size: 30px;
}
/*伪类选择器*/
a：hover{
color: red;
}
</style>
</head>
<body>
<div>
<span>未来科技1</span>
<p>
<span>未来科技2</span>
</p>
</div>
<span>未来科技3</span>
<p id="p01">未来科技4</p>
<p>未来科技5</p>
<p>未来科技6</p>
<hr />
<a href="">淘宝网站</a>
</body>
</html>
效果展示
上一篇： 手写时钟