当前位置:Gxlcms > 前端框架 > CSS中的伪类选择器和伪元素选择器的代码分析

CSS中的伪类选择器和伪元素选择器的代码分析

时间:2021-07-01 10:21:17 帮助过:97人阅读

本篇文章给大家带来的内容是关于CSS中伪类选择器以及伪元素选择器的介绍(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

一、链接伪类

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>
        <p id="test">我是p啦</p>
    </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;            }
            p{                width: 300px;                height: 200px;                line-height: 200px;                background: black;                color: pink;                text-align: center;                display: none;            }
            :target{                display: block;            }
        </style>
    </head>
    <body>
        <a href="#p1">p1</a>
        <a href="#p2">p2</a>
        <a href="#p3">p3</a>
        <p id="p1">
            p1        </p>
        <p id="p2">
            p2        </p>
        <p id="p3">
            p3        </p>
    </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>
        <p id="test">
            我是test        </p>
    </body>

三、隐私与:visited选择器

1、隐私与:visited选择器

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

四、表单相关伪类

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;            }
            p:focus{                background: pink;            }

        </style>
    </head>
    <body>
        <input type="text"  value="" />
        <p style="width: 200px;height: 200px;background: deeppink;" contenteditable="true" ></p>
    </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 p: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>
            <p class="item">p1</p>
            <p class="item">p2</p>
            <p class="item">p3</p>
            <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;            }

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

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

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

05_empty.html

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

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

    <body>
        <p></p>
        <p>Second</p>
        <p></p>
        <p>Third</p>
    </body>

五、伪元素

1、伪元素

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

2、代码实例:
after.html

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

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

    <body>
        <p>伪元素</p>
    </body>

before.html

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

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

    <body>
        <p>伪元素</p>
    </body>

firstLetter.html

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

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

    <body>
        <p>sssss</p>
    </body>

firstLine.html

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

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

    <body>
        <p>
            sssss<br> sssss            <br> sssss            <br>
        </p>
    </body>

selection.html

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

    <body>
        <p>SelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelection</p>
    </body>

相关推荐:

CSS中一些利用伪类、伪元素和相邻元素选择器的技巧

CSS中的选择器种类总结及效率比较示例

以上就是CSS中的伪类选择器和伪元素选择器的代码分析的详细内容,更多请关注Gxlcms其它相关文章!

人气教程排行