CSS常用的选择器学习

最新推荐文章于 2022-04-15 10:29:57 发布

Galen-gao

最新推荐文章于 2022-04-15 10:29:57 发布

阅读量492

点赞数

分类专栏： html 文章标签： css html

本文为博主原创文章版权归作者和CSDN共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

本文链接：https://blog.csdn.net/javaee_gao/article/details/105720545

版权

html 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

简介

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

基本CSS选择器

元素选择器

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

html

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

    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>

    #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>

    #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>

  #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>

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的后代元素。
兄弟元素
拥有相同的父元素即为兄弟元素，如下图所示：

选择器进阶

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

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>

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>

    #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>

    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>

    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>

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

实现效果如下：可以看到title为野心的标签被选中并设置橘黄色
在这里插入图片描述
而属性选择器除了上面判断属性值等于某个值，常见还有以下用法

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

Galen-gao

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS常用的选择器学习

简介最近工作中常常会与前端页面交互，掌握一定的前端知识还是必要的，而入门需要了解一下CSS选择器非常有必要。基本CSS选择器元素选择器元素选择器就是标签选择器，作用是选中页面中所有相同的标签元素html<div> <p> <span>我是p标签中的span</span> </p> ...
复制链接

扫一扫