CSS3 —— 选择器（带你深入了解 CSS3 选择器）-阿里云开发者社区

CSS3 —— 选择器（带你深入了解 CSS3 选择器）

2023-06-13 88

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： CSS3 —— 选择器（带你深入了解 CSS3 选择器）

一、常用选择器

通用兄弟元素选择器（ E~F ）：E 和 F 属于同一父元素之内，并且 F 在 E 之后，通用兄弟选择器会选择符合这样排列的所有的 F 元素。

    .test ~ p{
      background-color: red;
    }
  <div>
      <p>1</p>
      <p class="test">2</p>
      <p>3</p>
      <p>4</p>
      <p>5</p>
    </div>
    <p>6 已脱离 div</p>

二、属性选择器

E[attr^="value"]：该选择器选择属性名为 attr ，属性值以 value 开头的元素。

  a[title^='test']{
        background: skyblue;
    }
    <a href="https://www.lanqiao.cn" title="test">title="test"</a><br />
    <a href="https://www.lanqiao.cn" title="testxxx">title="testxxx"</a><br />
    <a href="https://www.lanqiao.cn" title="xxtest">title="xxtest"</a><br />
    <a href="https://www.lanqiao.cn" title="xxx">title="xxx"</a><br />

E[attr$="value"]：该选择器选择属性名为 attr，属性值以 value 结尾的元素。

  a[title^='test']{
        background: skyblue;
    }
    <a href="https://www.lanqiao.cn" title="test">title="test"</a><br />
    <a href="https://www.lanqiao.cn" title="testxxx">title="testxxx"</a><br />
    <a href="https://www.lanqiao.cn" title="xxtest">title="xxtest"</a><br />
    <a href="https://www.lanqiao.cn" title="xxx">title="xxx"</a><br />

E[attr*="value"]：该选择器选择属性名为 attr，属性值包含 value 的元素。

  a[title*='test']{
        background: skyblue;
    }
    <a href="https://www.lanqiao.cn" title="test">title="test"</a><br />
    <a href="https://www.lanqiao.cn" title="testxxx">title="testxxx"</a><br />
    <a href="https://www.lanqiao.cn" title="xxtest">title="xxtest"</a><br />
    <a href="https://www.lanqiao.cn" title="xxx">title="xxx"</a><br />

三、伪类选择器

E:root：该选择器选择文档的根节点，效果和设置 html 相同。

  :root {
        background-color: skyblue;
    }
    // 等同于
    html{
        background: lightgreen;
    }

E:nth-child(n)：该选择器选择 E 元素父元素的第 n 个子元素。

n 取值为整数：子元素不一定是同种类型，只能取正整数

  p:nth-child(3){
        background-color: red;
    }
  <p>1</p>
    <a href="">2</a>
    <p>3</p>
    <p>4</p>

n取值为表达式：取值为表达式时，选择器选择多个值，[n=0,1,2,3…]。当计算结果小于等于 0 或大于子元素总数时，不选取元素。

  p:nth-child(2n + 1){
        background-color: red;
    }
  <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>

  p:nth-child(even){
        background-color: red;
    }
  <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>

odd 相当于 2n+1。

even 相当于 2n。

E:nth-last-child(n)：从最后一个往前计数。

  p:nth-last-child(2n+1){
        background-color: red;
    }
  <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>

E:nth-of-type()：该元素选择的是与 E 相同类型的兄弟元素。

  p:nth-of-type(2n+1){
        background-color: red;
    }
    <p>1th of ele,1th of p</p>
    <p>2th of ele,2th of p</p>
    <a href="https://www.lanqiao.cn">3th of ele,1th of a</a>
    <p>4th of ele,3th of p</p>
    <p>5th of ele,4th of p</p>
    <p>6th of ele,5th of p</p>

5. E:last-child：该选择器选择 E 元素的父元素的最后一个子元素。

  p:last-child{
        color: red;
    }
    <p>第一个</p>
    <p>第二个</p>
    <p>第三个（最后一个）</p>

注意：该选择器需要满足父元素的最后一个元素和 E 匹配才会选取，否则不会选取。

  p:last-child{
        color: red;
    }
    <p>第一个</p>
    <p>第二个</p>
    <p>第三个（最后一个）</p>
    <strong>真的最后一个</strong>

E:first-of-type：该选择器选择 E 元素父元素的子元素的第一个与 E 元素类型一致的元素。

  p:first-of-type{
        color: red;
    }
    <h3>好好学习(h3)</h3>
    <p>第一个(p)</p>
    <p>第二个(p)</p>

E:last-of-type：该选择器选择 E 元素父元素的子元素的最后一个与 E 元素类型一致的元素。

  p:last-of-type{
        color: red;
    }
    <h3>好好学习(h3)</h3>
    <p>第一个(p)</p>
    <p>第二个(p)</p>

E:only-child：该元素选择的是 E 是其父元素唯一的子元素。

  .div1{
    width:100px;
        border: 2px solid;
    }
    .div2{
      width:100px;
        margin-top: 10px;
        border: 2px solid;
    }
    p:only-child{
        background: red;
    }
  <div class="div1">
        <p>好好学习</p>
    </div>
    <div class="div2">
        <p>好好学习</p>
        <p>天天向上</p>
    </div>

E:only-of-type：该选择器选择的是 E 是其父元素唯一的子元素类型。

  .div1{
        width:100px;
        border: 2px solid;
    }
    .div2{
        width:100px;
        margin-top: 10px;
        border: 2px solid;
    }
    p:only-of-type{
        background: red;
    }
  <div class="div1">
        <p>好好学习</p>
    </div>
    <div class="div2">
        <p>好好学习</p>
      <span>天天向上</span>
    </div>

E:empty：该选择器选择的是空元素。

  p:empty{
        width:200px;
        height:20px;
        background-color: red;
    }
  <p>好好学习</p>
    <p></p>
    <p>天天向上</p>

E:target：该选择器选择的是一个 id 与当前 url 匹配的元素。

  :target {
        border: 2px solid;
        background: lightgreen;
    }
  <a href="#p1">jump to p1</a><br />
    <a href="#p2">jump to p2</a>
    <p id="p1">p1</p>
    <p id="p2">p2</p>

E:not(s)：该选择器匹配不符合参数选择器 s 描述的元素。

  .demo{
        color: lightblue;
    }
    p:not(.demo){
        color:lightcoral;
    }
    :not(.demo){
        color:lightgreen;
    }
  <p class="demo">hello world</p>
    <p>好好学习</p>
    <span>天天向上</span>

第一个否定伪类选择器选择了 class 不为 demo 的 <p> 元素，样式为红色；第二个否定伪类选择器选择了 class 不为 demo 的 <span> 元素，样式为绿色。

13.E:enabled & E:disabled：该选择器匹配的是元素的可用和禁用状态。

  input:enabled{
        background: pink;
    }
    input:disabled{
        background: lightgreen;
    }
  <input type="text" name="test1" placeholder="disabled(不可选中)" disabled="true">
    <br>
    <input type="text" name="test2" placeholder="enabled(可选中)">

14. E:checked：该选择器一般用于 radio-button 或 checkbox，选择它们的 checked 状态。

  input[type='checkbox']:checked{
        margin: 100px;
    }
  <input type="checkbox" name="checkbox">

不积跬步无以至千里不积小流无以成江海

CSS3 —— 选择器（带你深入了解 CSS3 选择器）

一、常用选择器

二、属性选择器

三、伪类选择器

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

CSS3 —— 选择器（带你深入了解 CSS3 选择器）

一、常用选择器

二、属性选择器

三、伪类选择器

热门文章

最新文章

相关课程

相关电子书

相关实验场景