[CSS3]：CSS3选择器种类和使用方式详解

最新推荐文章于 2024-10-02 23:10:13 发布

原创最新推荐文章于 2024-10-02 23:10:13 发布 · 1.7k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#CSS选择器

H5/CSS/JS/jQuery 专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍了CSS3选择器的种类及其使用案例，包括基本选择器、层次选择器、伪类选择器及属性选择器等，帮助读者更好地理解和运用这些选择器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS3选择器概览

CSS选择器可以让css对HTML页面中的元素实现一对一、一对多或者多对一的样式匹配。CSS选择器是CSS中很重要的知识点，下面对于CSS选择器的说明倾向于归类总结的方式，同时会附上使用实例。下面的CSS选择器概括图和相应类别来源于网上，如有遗漏，敬请谅解。

基本选择器种类和使用案例

基本选择器	类型	功能描述
*	通配选择器	选择HTML文档中所有元素。
E	元素选择器	选择HTML文档中指定类型的元素。
#id	ID选择器	选择指定ID属性值为"id"的任意类型元素。
.class	类选择器	选择指定class属性值为“class”的任意类型元素，可指定多个。
selector1、selectorN	群组选择器	选择指定的每个选择器所匹配的元素，并统一使用样式。

  <!-- 省略了一些次要代码，复制查看时注意网页结构 ，一次性演示所有基本选择器 -->
    <style>
        /* 通配选择器 选择所有元素*/
        *{
            font-size: 30px;  /* 字体大小35px */
            color: red;     /* 字体都为红色 */
        }
        /* 元素选择器  选择所有div元素*/
        div{
            width: 300px; height: 100px; background-color:#8080c0;
            float: left;
        }
        /* ID选择器 匹配使用该id的元素，让字体大小为15px */
        #test-id{
            font-size: 15px; 
        }
        /* 类选择器 选择指定该class的元素，让背景色为黑色 */
        .test-class{
            background-color: rgb(0, 0, 0);
        }
        /* 群组选择器 同时选择多个元素，使他们的字体颜色都为粉色*/
       h2, h3, p{
            color:#ff0080;
        }
    </style>
</head>
<body>
    <!-- 内联样式    背景色：红色-->
    <div id="test-id">
        测试test-id ID选择器
    </div>
    <div class="test-class">
        测试test-class 类选择器
    </div>

    <h2>h2元素测试群组选择器</h2>
    <h3>h3元素测试群组选择器</h3>
    <p>P元素测试群组选择器</p>
</body>

以上，就是基本选择器的使用方式，虽然没什么难点，但要注意的是：在一个元素中，class属性可以指定多个类选择器，空格隔开。类选择器可以被许多元素同时使用。除此之外，一个ID也可以被多个元素指定，用一个ID选择器来控制多个元素样式，但使用JS拿到ID时容易引发错误，为了规范化，一个id只对应一个元素，同样的，一个ID选择器也只控制对应的ID元素。关于它们的优先级，只要明白作用域越小则优先级最大就行，不必过于死记它们的优先级之分，用多了就明白了。

层次选择器种类和使用案例

层次选择器	类型	功能描述
E F	后代选择器	选择匹配的F元素，F元素被包含在匹配的E元素内
E > F	子选择器	选择匹配的F元素，F元素是E元素的子元素
E + F	相邻兄弟选择器	选择匹配的F元素，F元素紧位于匹配的E元素的后面
E ~ F	通用兄弟选择器	选择匹配的F元素，F元素是E元素之后所有的F元素

后代选择器(包含选择器)

个人认为用包含选择器比较符合功能描述，后代选择器容易和子选择器概念搞混淆。

 <style>
        .div-first{
            width: 300px; height: 100px; 
            background-color: #c253d7;
        }
        /* 选择所有处于.div-first类选择器所指定元素内部的p h3元素  字体颜色为红色*/
        .div-first p, h3{
            color:red;
        }
    </style>

<div class="div-first">
        <p> div内部的 P元素</p>
        <h3>div内部的 h3元素1</h3>
        <h3>div内部的 h3元素2</h3>
    </div>

子选择器

    <style>
        /* 选择p元素, 且p元素的父元素是.div-son指定的元素*/
        .div-son > p{
            color: red;
        } 
    </style>

<body>
    <div class="div-son">
        <p> div内部的P元素</p>
        <h3><p>p元素的父元素是h3元素</p></h3>
        <p> div内部的 P元素</p>
    </div>   
</body>

执行效果

后代选择器和子选择器的区别：

后代和子选择器两者容易搞混淆，这里先说明一下父元素与子元素的关系：一个元素被放入另一个元素当中，则在内部的元素就是子元素，包含该元素的就是父元素。后代选择器的作用是选择该元素内部所有指定的子元素，把它们都包含在内，无差别选取。而子选择器只认直接父元素，不会向上追溯。当然，子选择器和其他选择器一样，都可以同时指定多个元素，多个元素之间用逗号隔开。

相邻兄弟选择器和通用兄弟选择器

 <style>
    /* 相邻兄弟选择器，选择p元素, 该p元素与h3元素相邻1位*/
        h3 + p{
            color: red;
            /* h1 + p + p则是相邻的第二个p元素 */
        } 
    /*通用兄弟选择器，选择p元素, 该p元素在h1元素之后
       注意，选取的P元素与h3元素同级 */
       h1 ~ p{
           color :blue;
       }
    </style>

<body>
    <h3>h3元素</h3>
    <p> 一号P元素</p>
    <p> 二号P元素</p>
    <p> 三号P元素</p>
    <div class="div-son">
        <h1>h1元素</h1>
        <p> 一号P元素</p>
        <p> 二号P元素</p>
        <p> 三号P元素</p>
    </div>
</body>

执行结果如下：

注意：相邻兄弟选择器如果选择的是后几位元素，则选择元素之间必须连续，不能被任意元素隔开，不然无法选取。但通用兄弟选择器不受该限制，就如其名所言，只要选择的元素是在指定元素之后，就一定能被选择，但前提是——两个元素同级别！

伪类选择器种类和使用案例

常规选择器不能表现HTML元素或属性的状态，而伪类选择器可以帮助我们向某些选择器添加一些特殊效果。选择器使用一个冒号:来连接伪类，

格式：选择器:伪类名，这就是一个伪类选择器。如果使用双冒号:: 就是伪元素。

动态伪类选择器

动态伪类选择器	类型	功能描述
E:link	链接伪类选择器	选择所有E元素，且E元素定义了超链接未被访问。
E:visited	链接伪类选择器	选择所有E元素，且E元素定义了超链接已被访问。
E:hover	用户行为选择器	选择所有E元素，且鼠标停留在元素E上。
E:active	用户行为选择器	选择所有E元素，且E元素被激活。常用于a标签和按钮
E:focus	用户行为选择器	选择所有获取焦点的元素。

   <style>
    /*未被访问链接的样式*/
     .div-test a:link{
         color:blueviolet;
     } 
    /*已被访问链接的样式*/
     .div-test a:visited{
        color:red;
    } 
    /*鼠标悬停在链接上*/
    .div-test a:hover{
        color: black;
    }
    /*链接处于激活状态*/
    .div-test a:active{
        color: green;
    }
    /*获得光标焦点*/
    .div-test a:focus{
        border: 1px solid red;
    }
    </style>

    <div class="div-test">
        <a href="https://www.baidu.com" id="a-test">我是超链接</a>
    </div>

关于a标签伪类注意点：
在同级样式中，后面的会覆盖前面同类样式，为了保证效果，在使用a标签伪类时要遵循以下顺序： link--visited--hover--focus--active。

还有，focus获取光标焦点和active不一样，active是链接或者按钮按下那一刻(可以按住鼠标不放来查看效果)，激活状态完成后，就恢复原样式，而光标焦点简单点讲，就是你鼠标那个小光标，点击那个网页位置，焦点就在哪里。可能有时候效果看起来不明显，可以采取tab键来查看当前光标。

目标伪类选择器

目标伪类选择器	功能描述
E:target	选择匹配相关URL指向的E元素。

URL后面跟有锚名称 #，指向文档内某个具体元素。这个被链接的元素就是目标元素。

:target 选择器可用于选取当前活动的目标元素。

 <style>
        /* 为不同的目标元素设置不同样式 */
        #a:target{
            width: 100px;
            height: 100px;
            background-color: black;
        }
        #b:target{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        #c:target{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>

  <!-- 设置三个URL指向的元素 -->
    <a href="#a">区域一</a>
    <a href="#b">区域二</a>
    <a href="#c">区域三</a>
    <!--目标元素 -->
    <div id="a"></div>
    <div id="b"></div>
    <div id="c"></div>

目标伪类可以简单的像JS一样，点击某个按钮或链接，然后对目标元素进行样式改变，而且代码量很少，但缺点就是网页会定位到目标元素哪里。关于目标执行效果自行测试。

否定伪类选择器

否定伪类选择器	功能描述
E:not(F)	在E元素中筛选除元素F之外的所有元素。也可以不指定E元素，相当于在文档中筛选。

该伪类可以提供过滤指定内容的功能，非常实用。实例如下：

  <style>
        /* 在.div1选择器中，筛选除P元素之外的所有元素 */
        .div1 :not(p){
            color: red;
        }

        /*在#boss选择器中，筛选除.test选择器之外的所有元素*/
        #boss :not(.test){
            width: 30px;
            height: 50px;
            background-color: green;
            border: 2px solid red;
        }
    </style>
<body>
     <div class="div1">
        <p>p段落1</p>
        <p>p段落2</p>
        <h3>h3段落</h3>
        <strong>STRONG</strong>
        <div>我是div文字</div>
    </div>
    <div id="boss">
        <div class="">区域一</div>
        <div class="test">我是类选择器test</div>
        <div class="">区域二</div>
    </div>
</body>

执行效果如下：

通过前面选择器的学习，后面的选择器用法也和上面大体相同，所以后面只提供相应伪类列表，实例可自行查找或自己去测试。

UI元素状态伪类选择器

UI元素状态伪类选择器	功能描述
E:checked	匹配所有选中的表单元素。例如复选框、单选框。
E:enabled	匹配所有启用的表单元素。
E:disabled	匹配所有禁用的表单元素。
E:focus	匹配所有获得光标焦点时的表单元素。
E:read-write	匹配E元素处于非只读状态时。
E:read-only	匹配E元素处于只读状态时。
E:valid	匹配E元素诸如required、pattern等属性所指定的检查或元素内容符合元素的规定格式时的样式
E:invalid	匹配E元素诸如required、pattern等属性所指定的检查或元素内容不符合元素的规定格式时的样式
E:required	选择允许使用required属性并已使用该属性的input、select和textarea元素。
E:optional	选择允许使用required属性但未使用该属性的input、select以及textarea元素。
E::selection	选择被用户选取的E元素部分。使用两个冒号:: 是伪元素。

结构伪类选择器

结构伪类选择器	功能描述
E:first-child	选择所有<E>元素，且E元素是其父元素中第一个。
E:last-child	选择所有<E>元素，且E元素是其父元素中最后一个。
E:root	选择E元素所在文档的根元素。HTML中，根元素始终是html。
E F:nth-child(n)	选择父元素E的第n个子元素F。n可以是整数(1，2，3)、关键字(even，odd)，n值起始值为1，而不是0。
E F:nth-last-child(n)	选择父元素E的倒数第n个子元素F。
E:nth-of-type(n)	选择所有在父元素内的第n个E元素。
E:nth-last-of-type(n)	选择所有在父元素内的倒数第n个E元素。
E:first-of-type	选择所有在父元素内具有指定类型的第一个E元素，与E:nth-of-type(1)等同。
E:last-of-type	选择所有在父元素内具有指定类型的最后一个E元素，与E:nth-last-of-type(1)等同。
E:only-child	选择<E>元素，且E元素是父元素的唯一子元素，没有别的元素。
E:only-of-type	选择<E>元素，且E元素是父元素中唯一类型的子元素。即多个子元素都是E元素。
E:empty	选择没有子元素的E元素，而且E元素也不包含任何文本节点。
E:before	选择E元素，在E元素之前插入内容
E:after	选择E元素，在E元素之后插入内容

属性选择器种类和使用案例

属性选择器	功能描述
[attr]	带有attr属性的所有元素
[attr=value]	带有attr="value"属性的所有元素
[attr~=value]	在attr属性值列表中，其中包含了一个value值的元素
[attr\|=value]	attr属性值是“value”，或以"value-"开头的所有元素
[attr^=value]	attr属性的属性值以value开头的元素
[attr$=value]	attr属性的属性值以“value”作为结尾的元素
E[attr]	匹配拥有attr属性的E元素。前面元素使用如需指定E元素，也按照此方式。