CSS常用的选择器学习

简介

最近工作中常常会与前端页面交互，掌握一定的前端知识还是必要的，而入门需要了解一下CSS选择器非常有必要。

基本CSS选择器

1. 元素选择器

元素选择器就是标签选择器，作用是选中页面中所有相同的标签元素

• html

<div>
    <p>
        <span>我是p标签中的span</span>
    </p>
    <span>我是div中的span</span>
</div>

• css

    span {
        color: red;
    }

运行效果如下：可以看到所有的span元素的颜色都为红色的。

2. id选择器
通过id选中唯一确认的值，id的值不可重复如果重复编辑器会有重复的告警提示。

• html

<div id="div1">
    <p>
        <span id="span1">我是p标签中的span</span>
    </p>
    <p id="p1">我是div中的span</p>
    <p>如果你的才华还实现不了你的野心</p>
    <p>那就静下心来，埋头苦干。</p>
    <p>有志者事竟成破釜成舟百二秦关终属楚</p>
    <p>苦心人天不负卧薪尝胆三千越甲可吞吴！</p>
</div>

• css

    #p1 {
        color: limegreen;
    }

运行效果如下：可以看到id为span1的元素设置为浅绿色了。

3. 类选择器
与元素id不可重复不同，多个元素可以有相同的类属性，通过类选择器可以选择一组元素。

• html

<div id="div1">
    <p>
        <span id="span1">我是p标签中的span</span>
    </p>
    <p id="p1">我是div中的span</p>
    <p class="text">如果你的才华还实现不了你的野心</p>
    <p class="text">那就静下心来，埋头苦干。</p>
    <p class="text">有志者事竟成破釜成舟百二秦关终属楚</p>
    <p class="text">苦心人天不负卧薪尝胆三千越甲可吞吴！</p>
</div>

• css

    #p1 {
        color: limegreen;
    }
    .text {
        color:gold;
    }

运行效果如下：可以看到class属性值为text的p元素标签颜色为金黄色。

4. 选择器分组
通过选择器分组可以选中多个元素选择器为每一个对应的选择器进行设置

• html

<div id="div1">
    <p>
        <span id="span1">我是p标签中的span</span>
    </p>
    <p id="p1">我是div中的span</p>
    <p class="text">如果你的才华还实现不了你的野心</p>
    <p class="text">那就静下心来，埋头苦干。</p>
    <p class="text">有志者事竟成破釜成舟百二秦关终属楚</p>
    <p class="text">苦心人天不负卧薪尝胆三千越甲可吞吴！</p>
    <h1>我是h1标签里面的文字</h1>
</div>

• css

  #p1,h1 {
      background-color: aqua;
  }

运行效果如下所示：可以看到id为p1的元素，与h1元素进行设值。

5. 复合选择器
选中满足多个选择器的元素，即每一个满足每一个选择器的元素

• html

<div id="div1">
    <p>
        <span id="span1">我是p标签中的span</span>
    </p>
    <p id="p1">我是div中的span</p>
    <p class="text">如果你的才华还实现不了你的野心</p>
    <p class="text">那就静下心来，埋头苦干。</p>
    <p class="text">有志者事竟成破釜成舟百二秦关终属楚</p>
    <p class="text">苦心人天不负卧薪尝胆三千越甲可吞吴！</p>
    <h1>我是h1标签里面的文字</h1>
    </br>
    <span class="sp1">我是div中的span</span>
</div>
<p class="sp1">我是body里的p元素</p>

• css

span.sp1 {
    background-color: red;
}

效果如下所示：可以看到只有满足是span元素且class属性为sp1的元素背景为红色，而class为sp1的p元素没有任何变化。

元素关系

了解进阶选择器之前，需要知道html元素之间的关系

• 父元素
  包含子元素的标签元素称为子元素的父元素,下面p标签就直接包含了子元素span

    <p>
        <span>我是p标签中的span</span>
    </p>

• 子元素
  被父元素直接包含的子元素，上面span元素既是p元素的子元素
• 祖先元素
  直接或者间接包含子元素的元素被称为祖先元素，父元素也是祖先元素。如下所示：div元素即为所有span元素的祖先元素。

<div>
    <p>
        <span>我是p标签中的span</span>
    </p>
    <span>我是div中的span</span>
</div>

• 后代元素
  直接或者直接被父元素包含的元素即为后代元素，子元素也是后代元素。如上所示：span即为div的后代元素。
• 兄弟元素
  拥有相同的父元素即为兄弟元素，如下图所示：
  

选择器进阶

1. 后代元素选择器
   一般选中某个祖先元素下的所有后代元素

• html

<div id="div1">
    <p>
        <span id="span1">我是p标签中的span</span>
    </p>
    <p id="p1">我是div中的span</p>
    <p class="text">如果你的才华还实现不了你的野心</p>
    <p class="text">那就静下心来，埋头苦干。</p>
    <p class="text">有志者事竟成破釜成舟百二秦关终属楚</p>
    <p class="text">苦心人天不负卧薪尝胆三千越甲可吞吴！</p>
    <h1>我是h1标签里面的文字</h1>
    </br>
    <span class="sp1">我是div中的span</span>
</div>
<p class="sp1">我是body里的p元素</p>

• css

div span {
    background-color: brown;
    font-size: 20px;
}

实现效果如下所示：div下所有的span元素背景颜色都发生变化。

2. 父子元素选择器
选中父元素下的子元素

• html

<div id="div1">
    <p>
        <span id="span1">我是p标签中的span</span>
    </p>
    <p id="p1">我是div中的span</p>
    <p class="text">如果你的才华还实现不了你的野心</p>
    <p class="text">那就静下心来，埋头苦干。</p>
    <p class="text">有志者事竟成破釜成舟百二秦关终属楚</p>
    <p class="text">苦心人天不负卧薪尝胆三千越甲可吞吴！</p>
    <h1>我是h1标签里面的文字</h1>
    </br>
    <span class="sp1">我是div1中的span</span>
</div>
<div id="div2">
    <span>我是div2中的span</span>
</div>
<p class="sp1">我是body里的p元素</p>

• css

    #div2 span {
    background-color: coral;
    }
    #div1 > span {
        background-color: darkgreen;
    }

效果如下所示：div的id 为div1元素下的span元素设置为绿色。

3. 相邻元素选择器
匹配指定元素后紧紧相连的兄弟元素，注意是后面相邻的元素。

• html

<div id="div1">
    <p>
        <span id="span1">我是p标签中的span</span>
    </p>
    <p id="p1">我是div中的span</p>
    <p class="text">如果你的才华还实现不了你的野心</p>
    <p class="text">那就静下心来，埋头苦干。</p>
    <p class="text">有志者事竟成破釜成舟百二秦关终属楚</p>
    <p class="text">苦心人天不负卧薪尝胆三千越甲可吞吴！</p>
    <h1>我是h1标签里面的文字</h1>
    </br>
    <span class="sp1">我是div1中的span</span>
</div>
<div id="div2">
    <span>我是div2中的span</span>
    <p class="sp1">我是body里的p元素</p>
</div>
<p id="sp1">我是body里的p1元素</p>
<p id="sp2">我是body里的p2元素</p>

• css

    div + p {
        background-color: darkgreen;
    }

效果如下图所示：可以看到只有一个p标签变绿色。

4. 通用选择器
匹配的指定元素后的所有匹配的元素

• html

<div id="div1">
    <p>
        <span id="span1">我是p标签中的span</span>
    </p>
    <p id="p1">我是div中的span</p>
    <p class="text">如果你的才华还实现不了你的野心</p>
    <p class="text">那就静下心来，埋头苦干。</p>
    <p class="text">有志者事竟成破釜成舟百二秦关终属楚</p>
    <p class="text">苦心人天不负卧薪尝胆三千越甲可吞吴！</p>
    <h1>我是h1标签里面的文字</h1>
    </br>
    <span class="sp1">我是div1中的span</span>
</div>
<div id="div2">
    <span>我是div2中的span</span>
    <p class="sp1">我是body里的p元素</p>
</div>
<p id="sp1">我是body里的p1元素</p>
<p id="sp2">我是body里的p2元素</p>

• css

    div ~ p {
        background-color: darkgreen;
    }

实现效果如下：可以看到紧随div后的所有p元素背景颜色都为绿色。

5. 属性选择器
根据元素的属性值来选定指定元素

• html

<div id="div1">
    <p id="p1">我是div中的p</p>
    <p class="text" title="野心">如果你的才华还实现不了你的野心</p>
    <p class="text">那就静下心来，埋头苦干。</p>
    <p class="text">有志者事竟成破釜成舟百二秦关终属楚</p>
    <p class="text" title="苦心">苦心人天不负卧薪尝胆三千越甲可吞吴！</p>
</div>

• css

p[title="野心"] {
    background-color: darkorange;
}

实现效果如下：可以看到title为野心的标签被选中并设置橘黄色

而属性选择器除了上面判断属性值等于某个值，常见还有以下用法

[attribute^=value] 选择器匹配属性值以指定值开头的每个元素
[attribute$=value] 选择器匹配属性值以指定值结尾的每个元素
[attribute*=value] 选择器匹配属性值包含指定值的每个元素