css组合选择符

最新推荐文章于 2023-12-12 09:35:39 发布

伏见伊奈里

最新推荐文章于 2023-12-12 09:35:39 发布

阅读量920

点赞数

分类专栏： CSS 前端综合

本文链接：https://blog.csdn.net/qq_35313994/article/details/51685107

版权

前端综合同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

CSS

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS 组合选择符</title>
    <style>
      .line{
        border-bottom: 1px solid red;
      }
      /*后代选取器(以空格分隔)*/
      /*匹配所有该元素的后代元素。*/
      .body1 p
      {
        background-color:red;
      }
      /*子元素选择器(以大于号分隔）*/
      /*子元素选择器（Child selectors）只能选择作为某元素子元素的元素。*/
      .body2>p
      {
        background-color:yellow;
      }
      /*相邻兄弟选择器（以加号分隔）*/
      .body3 .box+p
      {
        background-color:green;
      }
      /*普通兄弟选择器（以破折号分隔）*/
      .body4 .box~p
      {
        background-color:blue;
      }
    </style>
  </head>
  <body>
    <div class="line body1">
      <div class="box">
        <p>I am in box </p>
        <p>I am in box </p>
      </div>
      <p>I am outside of box</p>
      <p>I am outside of box</p>
    </div>
    <div class="line body2">
      <div class="box">
        <p>I am in box </p>
        <p>I am in box </p>
      </div>
      <p>I am outside of box</p>
      <p>I am outside of box</p>
    </div>
    <div class="line body3">
      <div class="box">
        <p>I am in box </p>
        <p>I am in box </p>
      </div>
      <p>I am outside of box</p>
      <p>I am outside of box</p>
    </div>
    <div class="line body4">
      <div class="box">
        <p>I am in box </p>
        <p>I am in box </p>
      </div>
      <p>I am outside of box</p>
      <p>I am outside of box</p>
    </div>
  </body>
</html>

伏见伊奈里

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css组合选择符

/*后代选取器(以空格分隔)*/ /*匹配所有该元素的后代元素。*/ .body1 p { background-color:red; } /*子元素选择器(以大于号分隔）*/ /*子元素选择器（Child selectors）只能选择作为某元素子元素的元素。*/ .body2>p { background-color:yellow; } /*相邻兄弟选择器
复制链接

扫一扫