【第四篇】CSS选择器之伪类选择器

最新推荐文章于 2024-06-05 15:27:04 发布

爱学习_程序员

最新推荐文章于 2024-06-05 15:27:04 发布

阅读量2.8k

点赞数 1

分类专栏： CSS 文章标签： css3 前端 html

本文链接：https://blog.csdn.net/baidu_38766791/article/details/125815261

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

利用组合选择器虽然可以选择子类和兄弟元素，但是无法做到特殊的选择。例如无法选择第几个子类，或者和其同标签的兄弟元素。为此CSS诞生了伪类选择器，用来进行更加灵活的元素选择。

伪类选择器

伪类选择器根据功能可以分为子元素伪类选择器，UI伪类选择器和其他伪类选择器。其优先级为(0,1,0)。

其他伪类选择器

用于根据页面元素的关系来选择页面元素。

:root

表示文档的根元素。常用于对页面整体进行设置，对整个文档都起作用。

举例：常用于对页面总体设置，例如设置基础字体等。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        :root{
            font-size: 16px;
            color: lightblue;
        }
    </style>
    <title>CSS选择器</title>
</head>
<body>
<div class="container">
    <ul>
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
        <li>第四项</li>
        <li>第五项</li>
    </ul>
</div>
</body>
</html>

效果：

:empty

表示一个没有子元素的元素。这里没有子元素要求也没有文本内容。

举例：选中页面中没有子元素的元素，并将其背景颜色改为darkred。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        :empty{
            background-color: darkred;
        }
    </style>
    <title>CSS选择器</title>
</head>
<body>
<div class="container">
    <ul>
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
        <li></li>
        <li>第五项</li>
    </ul>
</div>
</body>
</html>

效果：

子元素伪类选择器

子元素伪类选择器有两种一种是根据元素位置来选择，另一种是根据元素类型和位置来选择。

只根据元素位置来选择的伪类选择器有:first-child,:last-child,:only-child,:nth-child(an+b),:nth-last-child(an+b)。

根据元素类型和位置来选择的伪类选择器有:first-of-type,:last-of-type,:nth-of-type(an+b),:nth-last-of-type(an+b。

E:first-child和E:first-of-type

E:first-child选择父元素下为E类型且是第一个元素的元素，当E缺失时表示父元素下第一个子元素。当只想选中父元素下的第一个元素时，可以省略E。而当对第一个子元素的类型要要求时就需要加上E。

举例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        .container h3:first-child{
            color: red;
        }
        .container h1:first-child{
            color: green;
        }
    </style>
    <title>CSS选择器</title>
</head>
<body>
<div class="container">
    <h1>这是第一个h1标题</h1>
    <h1>这是第二个h1标题</h1>
    <h2>这是第一个h2标题</h2>
    <h2>这是第二个h2标题</h2>
    <h3>这是第一个h3标题</h3>
    <h3>这是第二个h3标题</h3>
</div>
</body>
</html>

效果：.container h3:first-child没有选中任何元素，是因为.container下的第一个子元素是h1而不是h3所以没有选中元素。.container h1:first-child和.container :first-child在这个案例中都会选中第一个h1元素。

E:first-of-type选择父元素下第一个类型为E的子元素，当E缺失时表示选择父元素下各个类型的第一个元素。

举例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        .container :first-of-type{
            color: green;
        }
        .container h3:first-of-type{
            color: red;
        }
    </style>
    <title>CSS选择器</title>
</head>
<body>
<div class="container">
    <h1>这是第一个h1标题</h1>
    <h1>这是第二个h1标题</h1>
    <h2>这是第一个h2标题</h2>
    <h2>这是第二个h2标题</h2>
    <h3>这是第一个h3标题</h3>
    <h3>这是第二个h3标题</h3>
</div>
</body>
</html>

效果：通过.container :first-of-type将.container下所有子元素的第一个元素的颜色变成green，然后通过.container h3:first-of-type将.container下第一个h3子元素的颜色变成red。

E:last-child和E:last-of-type

last-child和last-of-type的理解和first-child和first-of-type类似，只是位置不同。这里表示的是最后一个子元素。

举例:E:last-child的说明案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        .container h2:last-child{
            color: green;
        }
        .container h3:last-child{
            color: red;
        }
    </style>
    <title>CSS选择器</title>
</head>
<body>
<div class="container">
    <h1>这是第一个h1标题</h1>
    <h1>这是第二个h1标题</h1>
    <h2>这是第一个h2标题</h2>
    <h2>这是第二个h2标题</h2>
    <h3>这是第一个h3标题</h3>
    <h3>这是第二个h3标题</h3>
</div>
</body>
</html>

效果：

举例:E:last-of-type的说明案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        .container :last-of-type{
            color: green;
        }
        .container h2:last-of-type{
            color: red;
        }
    </style>
    <title>CSS选择器</title>
</head>
<body>
<div class="container">
    <h1>这是第一个h1标题</h1>
    <h1>这是第二个h1标题</h1>
    <h2>这是第一个h2标题</h2>
    <h2>这是第二个h2标题</h2>
    <h3>这是第一个h3标题</h3>
    <h3>这是第二个h3标题</h3>
</div>
</body>
</html>

效果：

E:nth-child(an+b)和E:nth-of-type(an+b)

E:nth-child(an+b）表示父元素下子元素类型为E，且元素位置满足an+b的条件的元素。这里的n从1开始取值。当E缺失时表示选取父元素下位置满足an+b条件的元素。

举例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        .container h1:nth-child(2n){
            color: green;
        }
        .container :nth-child(3n){
            color: red;
        }
    </style>
    <title>CSS选择器</title>
</head>
<body>
<div class="container">
    <h1>这是第一个h1标题</h1>
    <h1>这是第二个h1标题</h1>
    <h1>这是第三个h1标题</h1>
    <h2>这是第一个h2标题</h2>
    <h2>这是第二个h2标题</h2>
    <h3>这是第一个h3标题</h3>
    <h3>这是第二个h3标题</h3>
</div>
</body>
</html>

效果：

.container h1:nth-child(2n)表示选择.container下h1元素，且位置满足2n条件。即偶数位的h1。

.container :nth-child(3n)表示选择.container下位置满足3n条件的子元素。

举例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        .container :nth-of-type(2n){
            color: green;
        }
        .container h1:nth-child(3n){
            color: red;
        }
    </style>
    <title>CSS选择器</title>
</head>
<body>
<div class="container">
    <h1>这是第一个h1标题</h1>
    <h1>这是第二个h1标题</h1>
    <h1>这是第三个h1标题</h1>
    <h2>这是第一个h2标题</h2>
    <h2>这是第二个h2标题</h2>
    <h3>这是第一个h3标题</h3>
    <h3>这是第二个h3标题</h3>
</div>
</body>
</html>

说明：

.container :nth-of-type(2n)表示选择.container下每个子元素类型中偶数位的元素。

.container h1:nth-of-type(3n)表示选择.container下h1子元素类型的3n位置的元素。

E:nth-last-child(an+b)和E:nth-last-of-type(an+b)

这两个伪类元素的理解和E:nth-child(an+b)和E:nth-of-type(an+b)的理解相同，只不过是起始的位置不同，这里是从最后向前计算。

UI伪类选择器

UI伪类选择器常用于form表单元素。

E:focus

表示处于激活状态的E元素。

E:hover

表示鼠标指针正悬停在其上方的元素。

E:disabled

表示已经禁用的元素。

E:required

表示设置了required属性的元素。

举例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        input:focus{
            border: 1px solid red;
        }
        input:hover{
            border: 1px solid green;
        }
        input:required{
            border: 2px solid yellow;
        }
        input:disabled{
            background: gray;
        }
    </style>
    <title>CSS选择器</title>
</head>
<body>
<div class="container">
    <form>
        <input type="text" name="">
        <input type="text" name="" >
        <input type="text" name="" required>
        <input type="date" name="" disabled>

    </form>
</div>
</body>
</html>

效果：