2.3-1 元素关系选择器

最新推荐文章于 2023-11-20 15:48:54 发布

洋芋不姓杨

最新推荐文章于 2023-11-20 15:48:54 发布

阅读量156

点赞数

分类专栏： css 文章标签： css css3 html

本文链接：https://blog.csdn.net/youaigusheng/article/details/125539866

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

元素关系选择器

1、类型

名称	举例	意义
子选择器	div>p	div的子标签p
相邻兄弟选择器	img+p	图片后面紧跟着的段落将被选择
通用兄弟选择器	p~span	p元素之后的所有同层级span元素

2、子选择器

1、当使用“>”符号分隔两个元素时，它只会匹配那些作为第一个元素的直接后代元素，即两个标签为父子关系；
.box>p{
}
2、后代选择器不一定限制是子元素；
.box p{

}
3、子选择器从IE7开始兼容；

3、相邻兄弟选择器

1、相邻兄弟选择（+）介于两个选择器之间，当第二个紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中；
2、说白了，a+b就是选择“紧跟在a后面的一个b“；
3、相邻兄弟选择器从IE7开始兼容；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  <style>
        img+span{
            color:darkkhaki;
        }
  </style> 
</head>
<body>
  <p>
     <img src="" alt="">
     <span>这是故宫</span>
     //紧跟被选择的
     <span>这是故宫</span>
     //不被选择
  </p>
 <p> <img src="" alt="">
  <span>这是鸟巢</span>
  //紧跟被选择的
  </p>
</body>
</html>

4、通用兄弟选择器

1、通用兄弟选择器（~），a~b选择a元素之后所有同层级b元素；
2、通用选择器从IE7开始兼容；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  <style>
        h3~span{
          font-style:italic;
        }
  </style> 
</head>
<body>
  <span>我是后面的</span>//no
  <h3>我是一个三级标题</h3>
  <span>我第一</span>
  <span>我第er</span>
  <span>我第一</span>
  <span>我第一</span>
  <p>我是一个段落</p>
  <sapn>yi</sapn>
  <sapn>er</sapn>
  <div>
      <span>yiyiui</span>//no
      <span>yiyiuipo</span>//no
  </div>
</body>
</html>