日常生活的交流与学习

首页 新随笔 联系 管理

相邻兄弟选择器

  1. 就是选择紧跟在后面的一个兄弟元素
  2. 符号加号+

所有兄弟选择器

  1. 就是选择所有的兄弟元素
  2. 符号波浪号~

例子

效果

image

关键代码

image

代码

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 + p {background-color:orange;}
h1 ~ p {color:red}
</style>
</head>

<body>

<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>

</body>
</html>
posted on 2022-02-16 11:05  lazycookie  阅读(754)  评论(0编辑  收藏  举报