CSS选择器之伪类与伪元素选择器

最新推荐文章于 2025-05-19 11:03:49 发布

Blockchain Explorer

最新推荐文章于 2025-05-19 11:03:49 发布

阅读量403

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS/CSS3 文章标签：链接伪类动态伪类表单相关伪类结构性伪类伪元素

本文链接：https://blog.youkuaiyun.com/TDCQZD/article/details/82356009

CSS/CSS3 专栏收录该内容

23 篇文章

订阅专栏

本文详细介绍了 CSS 中的伪类与伪元素，包括链接伪类、动态伪类、表单相关伪类、结构性伪类及伪元素等概念，并通过多个实例展示了它们的应用方法。

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

一、链接伪类

1、链接伪类

        /*链接伪类*/        注意:link，:visited，:target是作用于链接元素的！
        :link       表示作为超链接，并指向一个未访问的地址的所有锚
        :visited    表示作为超链接，并指向一个已访问的地址的所有锚
        :target     代表一个特殊的元素，它的id是URI的片段标识符

2、代码实例：
01_锚点伪类.html

<head>
        <meta charset="UTF-8">
        <title></title>
        <!--:link：表示作为超链接，并指向一个未访问的地址的所有锚-->
        <style type="text/css">
            a{
                text-decoration: none;
            }
            a:link{
                color: deeppink;
            }
            #test:link{
                background: pink;
            }
        </style>
    </head>
    <body>
        <a href="#">点我点我点我</a>
        <div id="test">我是div啦</div>
    </body>

02_锚点伪类.html

<head>
        <meta charset="UTF-8">
        <title></title>
        <!--:visited：表示作为超链接，并指向一个已访问的地址的所有锚-->
        <style type="text/css">
            a{
                text-decoration: none;
            }
            a:link{
                color: black;
            }
            a:visited{
                color: pink;
            }
        </style>
    </head>
    <body>
        <a href="#">点我点我点我</a>
    </body>

03_target.html

<head>
        <meta charset="UTF-8">
        <title></title>
        <!--:target 代表一个特殊的元素，这个元素的id是URI的片段标识符。--> 
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            div{
                width: 300px;
                height: 200px;
                line-height: 200px;
                background: black;
                color: pink;
                text-align: center;
                display: none;
            }
            :target{
                display: block;
            }
        </style>
    </head>
    <body>
        <a href="#div1">div1</a>
        <a href="#div2">div2</a>
        <a href="#div3">div3</a>
        <div id="div1">
            div1
        </div>
        <div id="div2">
            div2
        </div>
        <div id="div3">
            div3
        </div>
    </body>

二、动态伪类

1、动态伪类

        /*动态伪类*/        注意:hover，:active基本可以作用于所有的元素！
        :hover      表示悬浮到元素上
        :active     表示匹配被用户激活的元素（点击按住时）
注意：
由于a标签的:link和:visited可以覆盖了所有a标签的状态，所以当:link，:visited，:hover，:active同时出现在a标签身上时 :link和:visited不能放在最后！！！

2、代码实例：

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #test:hover{
                color: pink;
            }
            #test:active{
                color: red;
            }
        </style>
    </head>
    <body>
        <div id="test">
            我是test
        </div>
    </body>

三、隐私与:visited选择器

1、隐私与:visited选择器

/*隐私与:visited选择器*/
只有下列的属性才能被应用到已访问链接：
    color  background-color  border-color

2、代码实例：

四、表单相关伪类

1、表单相关伪类

    /*表单相关伪类*/
    :enabled    匹配可编辑的表单
    :disable    匹配被禁用的表单
    :checked    匹配被选中的表单
    :focus      匹配获焦的表单

2、代码实例：
01_表单状态.html

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>无标题文档</title>
        <style>
            input {
                width: 100px;
                height: 30px;
                color: #000;
            }

            input:enabled {
                color: red;
            }

            input:disabled {
                color: blue;
            }
        </style>
    </head>

    <body>
        <input type="text" value="晓飞张" />
        <input type="text" value="晓飞张" disabled="disabled" />
    </body>

02_表单状态.html

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>无标题文档</title>
        <style>
            input:checked {
                width: 100px;
                height: 100px;
            }
        </style>
    </head>

    <body>
        <input type="checkbox" />
    </body>

03_获取焦点.html

<head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            input:focus{
                background: pink;
            }
            div:focus{
                background: pink;
            }

        </style>
    </head>
    <body>
        <input type="text"  value="" />
        <div style="width: 200px;height: 200px;background: deeppink;" contenteditable="true" ></div>
    </body>

04_模拟单选框.html

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>无标题文档</title>
        <style>
            label {
                float: left;
                margin: 0 5px;
                overflow: hidden;
                position: relative;
            }

            label input {
                position: absolute;
                left: -50px;
                top: -50px;
            }

            span {
                float: left;
                width: 50px;
                height: 50px;
                border: 3px solid #000;
            }

            input:checked~span {
                background: red;
            }
        </style>
    </head>

    <body>
        <label>
        <input type="radio" name="tab" />
        <span></span>
    </label>
        <label>
        <input type="radio" name="tab" />
        <span></span>
    </label>
        <label>
        <input type="radio" name="tab" />
        <span></span>
    </label>
    </body>

四、结构性伪类

1、结构性伪类

/*结构性伪类*/
index的值从1开始计数！！！！
index可以为变量n(只能是n)
index可以为even odd
    #wrap ele:nth-child(index)      表示匹配#wrap中第index的子元素 这个子元素必须是ele
    #wrap ele:nth-of-type(index)    表示匹配#wrap中第index的ele子元素
    除此之外:nth-child和:nth-of-type有一个很重要的区别！！
            nth-of-type以元素为中心！！！

:nth-child(index)系列         
    :first-child
    :last-child
    :nth-last-child(index)
    :only-child (相当于:first-child:last-child 或者 :nth-child(1):nth-last-child(1))
:nth-of-type(index)系列
    :first-of-type
    :last-of-type
    :nth-last-type(index)
    :only-of-type   (相当于:first-of-type:last-of-type 或者 :nth-of-type(1):nth-last-of-type(1))

:not        
:empty(内容必须是空的，有空格都不行，有attr没关系)

2、代码实例：

<head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">

            /*子元素的标签应该要统一*/
            /*ul .item:nth-child(3){
                border: 1px solid;
            }*/


            ul .item:nth-of-type(3){
                border: 1px solid;
            }
            /*ul p:nth-of-type(3){
                border: 1px solid;
            }
            ul div:nth-of-type(3){
                border: 1px solid;
            }
            ul li:nth-of-type(3){
                border: 1px solid;
            }*/
        </style>
    </head>
    <body>
        <ul>
            <p class="item">p1</p>
            <p class="item">p2</p>
            <p class="item">p3</p>
            <li class="item">1</li>
            <li class="item">2</li>
            <li class="item">3</li>
            <li class="item">4</li>
            <li class="item">5</li>
            <div class="item">div1</div>
            <div class="item">div2</div>
            <div class="item">div3</div>
            <li class="item">6</li>
            <li class="item">7</li>
            <li class="item">8</li>
            <li class="item">9</li>
        </ul>
    </body>

04_not.html

<head>
        <meta charset="UTF-8">
        <title>not</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                border: none;
            }

            a {
                text-decoration: none;
                color: #333;
                font-size: 14px;
                display: block;
                float: left;
                width: 100px;
                height: 30px;
            }

            div {
                width: 800px;
                margin: 0 auto;
            }

            div>a:not(:last-of-type) {
                border-right: 1px solid red;
            }
        </style>
    </head>

    <body>
        <div>
            <a href="#">first</a>
            <a href="#">second</a>
            <a href="#">third</a>
            <a href="#">fourth</a>
            <a href="#">fifth</a>
        </div>
    </body>

05_empty.html

<head>
        <meta charset="UTF-8">
        <title>empty</title>
        <style type="text/css">
            div {
                height: 200px;
                background: #abcdef;
            }

            div:empty {
                background: #f00;
            }
        </style>
    </head>

    <body>
        <div></div>
        <div>Second</div>
        <div></div>
        <div>Third</div>
    </body>

五、伪元素

1、伪元素

/*伪元素*/
    ::after
    ::before
    ::firstLetter
    ::firstLine
    ::selection

2、代码实例：
after.html

<head>
        <meta charset="UTF-8">
        <title>after</title>
        <style type="text/css">
            div {
                width: 300px;
                height: 100px;
                border: 1px solid #000;
            }

            div::after {
                content: "我在内容的后面";
            }
        </style>
    </head>

    <body>
        <div>伪元素</div>
    </body>

before.html

<head>
        <meta charset="UTF-8">
        <title>before</title>
        <style type="text/css">
            div {
                width: 300px;
                height: 100px;
                border: 1px solid #000;
            }

            div::before {
                content: "我在内容的前面";
            }
        </style>
    </head>

    <body>
        <div>伪元素</div>
    </body>

firstLetter.html

<head>
        <meta charset="UTF-8">
        <title>First-Letter</title>
        <style type="text/css">
            div {
                width: 500px;
                margin: 0 auto;
                font-size: 12px;
            }

            div::first-letter {
                color: #f00;
                font-size: 24px;
                font-weight: bold;
            }
        </style>
    </head>

    <body>
        <div>sssss</div>
    </body>

firstLine.html

<head>
        <meta charset="UTF-8">
        <title>First-Line</title>
        <style type="text/css">
            div {
                width: 500px;
                margin: 0 auto;
            }

            div::first-line {
                color: #f00;
                font-weight: bold;
            }
        </style>
    </head>

    <body>
        <div>
            sssss<br> sssss
            <br> sssss
            <br>
        </div>
    </body>

selection.html

<head>
        <meta charset="UTF-8">
        <title>Selection</title>
        <style type="text/css">
            div::selection {
                background: red;
                color: pink;
            }
        </style>
    </head>

    <body>
        <div>SelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelection</div>
    </body>