组合选择符深入了解

最新推荐文章于 2023-08-30 17:15:45 发布

liuxmoo

最新推荐文章于 2023-08-30 17:15:45 发布

阅读量509

点赞数 2

分类专栏： html/css/css3 文章标签：组合选择器选择符兄弟元素后代元素后续元素

本文链接：https://blog.csdn.net/xiaomizhou66a/article/details/80958598

版权

html/css/css3 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

组合选择符深入了解：

一、组合符是通过简单的选择符组合起来使用的选择符

在 CSS3 中包含了四种组合方式:

后代选择器(以空格分隔) 0个，1个，多个
子元素选择器(以大于号分隔） 0个，1个，多个
相邻兄弟选择器（以加号分隔） 0个，1个
普通兄弟选择器（以破折号分隔） 0个，1个，多个

1、后代选择器（俗着说：后代后代就是他的所有子孙元素）

例如：div p

  <style>
    div {
      width: 500px;
      height: 100px;
      border: 1px solid red;
    }
    div p{
      color: red;
    }
  </style>
</head>

<body>
  <div>
    <p>我是liuxmoo！</p>
    <span>
      <p>你好呀</p>
    </span>
  </div>
  <p>我是谁？？我不在div里面，不是它的后代,我不会边红色</p>
</body>

结果展示：

2、子元素选择器（俗着说：子元素，就是他的儿子女儿们，并不包括孙子孙女们）

例如：div>p

  <style>
    div {
      width: 500px;
      height: 100px;
      border: 1px solid red;
    }

    div>p {
      color: red;
    }
  </style>
</head>

<body>
  <div>
    <p>我是liuxmoo！</p>
    <span>
      <p>这是孙子不变色</p>
    </span>
  </div>
  <p>我不在div里面，我不会变红色</p>
</body>

结果：

3、相邻兄弟选择器（俗着说：兄弟兄弟，就是有同一个父亲（父元素），相邻兄弟那就是该元素后面紧跟在一起的某个兄弟元素）

例如：div+p

  <style>
    div {
      width: 500px;
      height: 100px;
      border: 1px solid red;
    }

    div+p {
      color: red;
    }
  </style>
</head>

<body>
  <div>
    <p>我是liuxmoo！</p>
    <span>
      <p>这是孙子</p>
    </span>
  </div>
  <p>与div有相同的父亲，body，而且是紧跟在div后面的兄弟，变色</p>
  <p>与div有相同的父亲，body，但是不是紧跟着的兄弟，不变色</p>
</body>

如果紧跟着的不是选择的元素，那就是这个选择符选择不到元素，

  <style>
    div {
      width: 500px;
      height: 100px;
      border: 1px solid red;
    }

    div+p {
      color: red;
    }
  </style>
</head>

<body>
  <div>
    <p>我是liuxmoo！</p>
    <span>
      <p>这是孙子</p>
    </span>
  </div>
  <span>与div有相同的父亲，body，但是不是p元素，不变色啊</p>
    <p>与div有相同的父亲，body，也是p元素，但是不是紧跟着的兄弟，不变色</p>
</body>

结果：

4、后续兄弟选择器（俗着说：兄弟兄弟，就是有同一个父亲（父元素），后续兄弟：在这个元素后面出现的所有某个兄弟元素）

例如：div~p

  <style>
    div {
      width: 500px;
      height: 100px;
      border: 1px solid red;
    }

    div~p {
      color: red;
    }
  </style>
</head>

<body>
  <p>与div有相同的父亲，body，但是是前面出现的兄弟元素，不变色</p>
  <div>
    <p>我是liuxmoo！</p>
    <span>
      <p>这是孙子</p>
    </span>
  </div>
  <p>与div有相同的父亲，body，并且是div的后面出现的兄弟元素，变色</p>
  <p>与div有相同的父亲，body，并且是div的后面出现的兄弟元素，变色</p>
</body>

结果展示：

liuxmoo

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
组合选择符深入了解

组合选择符深入了解：一、组合符是通过简单的选择符组合起来使用的选择符在 CSS3 中包含了四种组合方式:后代选择器(以空格分隔) 0个，1个，多个子元素选择器(以大于号分隔） 0个，1个，多个相邻兄弟选择器（以加号分隔） 0个，1个普通兄弟选择器（以破折号分隔） 0个，1个，多个1、后代选择器（俗...
复制链接

扫一扫