39 lines
710 B
HTML
39 lines
710 B
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>05_兄弟选择器</title>
|
|
<style>
|
|
/* 选中div后所有的兄弟p元素 */
|
|
div~p {
|
|
color: green;
|
|
}
|
|
|
|
/* 选中div后紧紧相邻的兄弟p元素 */
|
|
div+p {
|
|
color: red;
|
|
}
|
|
|
|
li~li {
|
|
color: orange;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div>zyjblogs</div>
|
|
<p>前端</p>
|
|
<p>Java</p>
|
|
<p>大数据</p>
|
|
<p>UI</p>
|
|
<ul>
|
|
<li>主页</li>
|
|
<li>秒杀</li>
|
|
<li>订单</li>
|
|
<li>我的</li>
|
|
</ul>
|
|
</body>
|
|
|
|
</html> |