CSS3兄弟选择器

+ 选择器(相邻兄弟选择器)

  • 如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器。
  • 格式:元素1+元素2
  • 结果: 紧挨着元素1后面的元素2被选中
    eg:
<style type="text/css">
    h1 + p {
        color:green;
    }
</style>

<body>
    <p>This is paragraph (p标签)</p>
    <h1>this is heading (h1标签)</h1>
    <p>This is paragraph (p标签)</p>
    <p>This is paragraph (p标签)</p>
</body>
  • 运行结果:

  • 注意
     当多个兄弟元素相同时,会循环查找。
      eg:

<style type="text/css">
    li + li {
        color:green;
    }
</style>

<body>
<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
  </ul>
</div>
</body>
  • 运行结果:

2. ~ 选择器

  • 查找某一个指定元素的后面的所有兄弟结点。
  • 格式:元素1~元素2
  • 结果: 元素1后的元素2都会被选中
    eg:
<style type="text/css">
    h1 ~ p{
        color:red;
    }
</style>

<body>
    <p>This is paragraph (p标签)</p>
    <h1>this is heading (h1标签)</h1>
    <p>This is paragraph (p标签)</p>
    <p>This is paragraph (p标签)</p>
</body>
  • 运行结果:
posted @   Kangf  阅读(195)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
点击右上角即可分享
微信分享提示