CSS学习记录5-优快云博客

本文链接：https://blog.youkuaiyun.com/zhaoshengmeyan/article/details/139513503

伪类选择器：

概念：伪类，像类但不是类，是标签的一种特殊状态。

作用：选中特殊状态的标签。

    <style>
        /*伪类 分类了吗？如分！*/
        /*像类，但不是类，是标签的一种特殊状态*/
        /*选中特殊状态的元素*/

        /*选中没有访问过的a标签*/
        a:link{
            color: gold;
        }
        /*选中访问过的a标签*/
        a:visited{
            color: green;
        }
    </style>

伪类选择器：动态伪类，结构伪类，否定伪类，UI伪类.

目标伪类，语言伪类了解即可。

动态伪类

状态不确定，一会一变的伪类

例：

1. :link 超链接未被访问的状态。

2. :visited 超链接访问过的状态。

3. :hover 鼠标悬停在元素上的状态。

4. :active 元素激活的状态。

5. :focus 获取焦点的元素。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器_动态伪类</title>
    <style>
        /*超链接为被访问时的状态*/
        a:link{
            color: blue;
        }
        /*超链接访问过的状态*/
        a:visited{
            color: black;
        }
        /*鼠标悬停在元素上的状态*/
        a,p:hover{
            color: red;
        }
        /*元素激活时的状态*/
        a:active{
            color: aqua;
        }
        /*以上四种只能按照固定顺序，即以上顺序来写*/
        /*获取焦点的元素 只能用于表单类*/
        input:focus{
            color: red;
        }
    </style>
</head>
<body>
    <a href="https://www.bilibili.com/">bilibli</a>
    <p>黑神话300块入手</p>
    <input type="text">
</body>
</html>

结构伪类

常用：

:first-child 指定的元素，如果是所以兄弟元素中的第一个，则被选中。

:last-child 指定的元素，如果是所以兄弟元素中的最后一个，则被选中。

:nth-child(an+b) 指定的元素，如果是所以兄弟元素中的第an+b个，则被选中。

    <style>
        /* 指定元素，如果是所以兄弟元素中的第一个，则被选中。*/
        /*指定div的子代p元素，如果其为所以兄弟元素中的第一个，则被选中 结构1，2*/
        div>p:first-child {
            color: red;
        }
        /*指定div的子代p元素，如果其为所以兄弟元素中的最后一个，则被选中 结构1*/
        div>p:last-child{
            color: aqua;
        }
        /*指定div的子代p元素，如果其为所以兄弟元素中的第an+b个，则被选中 结构1*/
        div>p:nth-child(3){
            color: blue;
        }
    </style>


    <!--结构1-->
    <div>
        <p>test01</p><!--red-->
        <p>test02</p>
        <p>test03</p><!--blue-->
        <p>test04</p><!--aqua-->
    </div>

    <!--结构2    
    <div>
        <span>test01<span>
        <p>test02</p>
        <p>test03</p>
        <p>test04</p>
    </div>
    该结构不会生效，因为子代p元素，不是第一个
    -->

    <style>
        /* 指定元素，如果是所以兄弟元素中的第一个，则被选中。*/
        /*指定span的后代p元素，如果其为所以兄弟元素中的第一个，则被选中 结构3*/
        span p:first-child{
            color: red;
        }
    </style>


    <span>
        <marquee>
            <P>测试1.1</P><!--该p元素被选中，因为其作为span的后代，是所以兄弟元素中的第一个-->
            <P>测试1.2</P>
            <P>测试1.3</P>
        </marquee>
        <P>测试2</P>
        <P>测试3</P>
        <P>测试4</P>
    </span>

:first-of-type 第一个指定元素

:last-of-type 最后一个指定元素

:nth-of-type(an+b) 第an+b个指定元素

    <style>
        /* 第一个p元素*/
        div>p:first-of-type{
            color: red;
        }
        /*最后一个p元素*/
        div>p:last-of-type{
            color: aqua;
        }
        /*第an+b个指定元素*/
        div>p:nth-of-type(3){
            color: blue;
        }
    </style>


    <div>
        <span>disturb01</span>
        <p>test01</p><!--red-->
        <span>disturb02</span>
        <p>test02</p>
        <span>disturb03</span>
        <p>test03</p><!--blue-->
        <span>disturb04</span>
        <p>test04</p>
        <span>disturb05</span>
        <p>test05</p><!--aqua-->
        <span>disturb06</span>
    </div>

非常用（了解）：

:nth-last-child(n) 所有兄弟元素中的倒数第 n 个。

:nth-last-of-type(n) 所有同类型兄弟元素中的倒数第n个。

:only-child 选择没有兄弟的元素（独生子女）。

:only-of-type 选择没有同类型兄弟的元素。

:root 根元素。

:empty 内容为空元素（空格也算内容）。

否定伪类

:not(选择器) 排除满足括号中条件的元素。

    <style>
        /*排除out类，即test02*/
        div>p:not(.out){
            color: aqua;
        }
    </style>


    <div>
        <p>test01</p>
        <p class="out">test02</p>
        <p>test03</p>
    </div>

括号里可以是各种选择器。

例：

        div>p:not(:first-child){
            color: aqua;
        }
        div>p:not([title]){
            color: aqua;
        }

UI伪类

:checked 被选中的复选框或单选按钮。

:enable 可用的表单元素（没有 disabled 属性）。

:disabled 不可用的表单元素（有 disabled 属性）。

    <style>
        input:checked{
            width: 100px;
            height: 100px;
        }
        input:disabled{
            background-color:rebeccapurple;
        }
        input:enabled{
            background-color: aqua;
        }
    </style>


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

目标伪类

：target 选中锚点指向的元素

语言伪类

:lang() 根据指定的语言选择元素

因为开头会写<html lang="zh-CN">

所以即使标签里不加lang属性也会被选中

伪元素选择器

一般选择器都是选中元素的，而伪元素选择器选中的不是元素。

所以被选中的称为伪元素，选择器也就称为伪元素选择器。

像元素但不是元素，是元素中的一些特殊位置。

作用：选中元素中的一些特殊位置。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪元素选择器</title>
    <style>
        /*选中p标签中第一个字母*/
        p::first-letter{
            color: aqua;
            font-size: 50px;
        }
        /*选中p标签中的第一行字符串*/
        p::first-line{
            background-color: yellow;
        }
        /*选中p标签中被鼠标选中的字符串*/
        p::selection{
            background-color: green;
            color: gold;
        }
        /*选中input标签中的提示文字*/
        input::placeholder{
            color: aqua;
        }
        /*选中的是div元素最开始的位置，随后创建一个子元素,必须用 content 属性指定内容*/
        div::before{
            content:"￥";
            color: goldenrod;
        }
        /*选中的是div元素最后的位置，随后创建一个子元素,必须用 content 属性指定内容*/
        div::after{
            content: ".00";
        }
    </style>
</head>
<body>
    <!--lorem 随机生成字符串-->
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque, amet!</p>
    <input type="text" placeholder="请输入你的用户名"><!--placeholder提示文字-->
    <div>199</div>
    <div>199</div>
    <div>199</div>
</body>
</html>