没心没肺づ惜

V1

2022/08/19阅读:15主题:默认主题

CSS的伪类、伪元素

CSS的伪类、伪元素

1.伪类

<style>
    /* 伪类 */
    a:hover {
        /* 把鼠标放在链接上的状态 */
    }  
    a:link {
        /* 选择所有未访问链接 */
    }    
    a:active {
        /* 选择正在活动链接 */
    }  
    a:visited {
        /* 选择所有访问过的链接 */
    }
    :root {
        /* 选择文档的根元素 */
    }
    :target {

        /* 选择当前活动#news元素(点击URL包含锚的名字) */
        /* 
            <p><a href="#news1">Jump to New content 1</a></p>
            <p><a href="#news2">Jump to New content 2</a></p>

            <p id="news1">当上方href="#news1"属性的a标签点击 :target样式生效</p>
            <p id="news2">当上方href="#news2"属性的a标签点击 :target样式生效</p> 
        */

    }
    :not(p) {
        /* 选择所有p以外的元素 */
    }
    p:empty {
        /* 选择所有没有子元素的p元素 */
    }
    p:first-child {
        /* 选择器匹配属于任意元素的第一个子元素的 <p> 元素 */
    }
    p:last-child {
        /* 选择所有p元素的最后一个子元素 */
    }
    p:first-of-type {
        /* 选择的每个 p 元素是其父元素的第一个 p 元素 */
    }
    p:last-of-type {
        /* 选择每个p元素是其母元素的最后一个p元素 */
    }
    p:only-child {
        /* 选择所有仅有一个子元素的p元素 */
        /* 
        <div><p>被选中</p></div>
        <div><span></span><p></p></div> 
        */

    }
    p:only-of-type {
        /* 选择所有仅有一个子元素为p的元素 */
        /* 
        <div><p>被选中</p></div>
        <div><span></span><p>被选中</p></div> 
        */

    }
    p:nth-child(2) {
        /* 选择所有 p 元素的父元素的第二个子元素 */
    }
    p:nth-last-child(2) {
        /* 选择所有p元素倒数的第二个子元素 */
    }
    p:nth-last-of-type(2) {
        /* 选择所有p元素倒数的第二个为p的子元素 */
    }
    p:nth-of-type(2) {
        /* 选择所有p元素第二个为p的子元素 */
    }
    p:lang(it) {
        /* 为<p>元素的lang属性值为it选择一个开始值 */
    }



    input:focus {
        /* 选择元素输入后具有焦点 */
    }
    input:optional {
        /* 选择没有"required"的元素属性 */
    }
    input:read-only {
        /* 选择只读属性的元素属性 */
    }
    input:read-write {
        /* 选择没有只读属性的元素属性 */
    } 
    input:required {
        /* 选择有"required"属性指定的元素属性 */
    } 
    input:valid {
        /* 选择指定范围以外的值的元素属性 */
    }  
    input:invalid {
        /* 选择所有无效的元素 */
    }  
    input:out-of-range {
        /* 选择指定范围以外的值的元素属性 */
    }   
    input:disabled {
        /* 选择所有禁用的表单元素 */
    }  
    input:enabled {
        /* 选择所有启用的表单元素 */
    }  
    input:in-range {
        /* 选择元素指定范围内的值 */
    }
</style>

2.伪元素

<style>
    /* 伪元素 */
    p::after {
        /* 在每个<p>元素之后插入内容 */
    }
    p::before {
        /* 在每个<p>元素之前插入内容 */
    }
    p::first-line {
        /* 选择每个<p> 元素的第一行 */
    } 
    p::first-letter {
        /* 选择每个<p> 元素的第一个字母 */
    } 
</style>

分类:

前端

标签:

CSS

作者介绍

没心没肺づ惜
V1