CSS3-选择器，子代选择器 ">"、顺序选择器、下一个兄弟选择器、后面所有的兄弟选择器的用法-蒲公英云

CSS3-选择器，子代选择器 ">"、顺序选择器、下一个兄弟选择器、后面所有的兄弟选择器的用法

傷城~ 2023-08-17 16:42 153阅读 0赞

文章目录

- - - - 子代选择器
      - 顺序选择器
      - 下一个兄弟选择器
      - 后面所有的兄弟选择器

子代选择器

子代选择器用 > 表示，只选择指定元素的子元素（儿子标签）；IE7开始兼容，IE6不兼容

div>p{ 
    color:red;
}

div 标签的儿子（一级子标签） p 标签；和 div 标签的后代（当前元素下的所有子标签） p 标签截然不同

能够选择：

<div>
    <p>我是div的儿子</p>
</div>

不能选择：

<div>
    <ul>
        <li>
            <p>我是div的重孙子</p>
        </li>
    </ul>
</div>

顺序选择器

:first-child 选择指定父元素中第一个子元素；first（第一个），child（孩子）
:last-child 选择指定父元素中最后个子元素；last （末尾、最后）
IE8开始兼容，IE6、7都不兼容

示例：

选择父级元素为 div 中的第一个后代元素 p：

div p:first-child{ 
    color: red;
    background: yellow;
}
<div class="box">
  <a href="#"><p>p 标签</p></a>
  <p>p 标签1</p>
  <p>p 标签2</p>
  <p>p 标签3</p>
  <p>p 标签4</p>
  <div>
    <p>p 标签11</p>
    <p>p 标签22</p>
  </div>
</div>

在这里插入图片描述
选择父级元素为 div 中的最后一个后代元素 p：

div p:last-child{ 
    color:blue;
}

在这里插入图片描述
由于浏览器的更新需要过程，所以现在如果公司还要求兼容IE6、7，那么就要自己写类名：

<ul>
    <li class="first">项目</li>
    <li>项目</li>
    <li>项目</li>
    <li>项目</li>
    <li>项目</li>
    <li>项目</li>
    <li>项目</li>
    <li>项目</li>
    <li>项目</li>
    <li class="last">项目</li>
</ul>

用类选择器来选择第一个或者最后一个：

ul li.first{ 
    color:red;
}
ul li.last{ 
    color:blue;
}

下一个兄弟选择器

+ 表示选择下一个兄弟元素；选择指定的第一个元素之后紧跟的元素（兄弟元素）

IE7开始兼容，IE6不兼容

h3+p{ 
    color:red;
}

选择上的是h3元素后面紧挨着的第一个兄弟。

<h3>我是一个标题</h3>
<p>我是一个段落</p><!--就是我-->
<p>我是一个段落</p>
<h3>我是一个标题</h3>
<p>我是一个段落</p><!--还有我-->
<p>我是一个段落</p>
<h3>我是一个标题</h3>
<p>我是一个段落</p><!--可别落下了我-->
<p>我是一个段落</p>
<h3>我是一个标题</h3>
<span>我是一个sapn标签</span><!--别看我，我不是-->

在这里插入图片描述

后面所有的兄弟选择器

~ 表示后面所有兄弟元素

选择 h1 标签后面所有兄弟元素 p 标签

h1~p { 
    background: yellow;
}
<div>
  <h1>h1 标签</h1>
  <p>p 标签</p>
  <span>span 标签</span>
  <ul>
    <li>
      <p>p 标签</p>
    </li>
  </ul>
  <p>p 标签</p>
</div>