12-高级选择器和伪元素应用

最新推荐文章于 2024-08-26 19:16:26 发布

qq_46230474

最新推荐文章于 2024-08-26 19:16:26 发布

阅读量132

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_46230474/article/details/104475009

版权

12-高级选择器和伪元素应用

高级选择器的种类

伪类选择器之状态类

checked
:hover
:active
:focus

伪类选择器之结构类

:nth-child(n)
:nth-last-child(n)
:nth-of-type(n)
:nth-last-of-type(n)

伪类选择器之属性类

[ att ]
[ att = value ]
[ att ^= value ]
[ att $= value ]
[ att *= value ]

CSS 伪类（pseudo-class）是一个以冒号(:)作为前缀，被添加到一个选择器末尾的关键字
当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类（pseudo-class）

伪类伪类

link 没有访问的链接

visited 已访问的链接
：hver 鼠标悬停
active 鼠标按下未抬起
状态类伪类书写顺序如上：爱恨准则love->hate也可以记为lv ha

在这里插入图片描述
checked 改变的是表单被选中时的样式,还需要设置具体样式

在这里插入图片描述

:focus
该伪类表示当用户点击,触摸,通过键盘的 “tab” 键选择表单元素、链接等元素时会被触发

在这里插入图片描述

结构类伪类选择器

nth-child（）

首先找到伪类前选择器选中的元素的所有兄弟元素，然后按照位置先后顺序从1开始排序

也可以理解为nth-child() 既要满足选择器前面的需求，其次要是父级中的第几个

不同的结构会重新排序

在这里插入图片描述

nth-of-type（）首先要满足选择器前面的需求，其次是在选择器中排序

括号内可以是数字也可以是带n的公式，但是带n部分必须写在括号内

不同的结构会重新排序

在这里插入图片描述

nth-last-child() 设置的元素属性相反

列：

在这里插入图片描述

first-child（）必须是第一个，且是选择器前的结构

列

在这里插入图片描述
如果不是则不行

列如：

在这里插入图片描述
last-child 必须是最后一个，且是选择器前的结构

first-of-type 必须是第一个，且是选择器前的结构，就算有其他元素在前面也不会构成影响

列：

在这里插入图片描述
伪类选择器之属性类

~包含属性为XXX的元素

^属性一XXX开头的标签

$属性以XXX结尾的标签

*属性包含XXX的标签概念比~模糊

在这里插入图片描述

伪元素

伪元素必须要有content。没有内容引导引号内就为空的

伪元素是行内的特性，要加display：block

::before 和::after设置的元素属性相反前者设置元素属性是在开头，而after则相反

  <style>
        div{
            width: 300px;
            height: 300px;
            border: 2px solid pink;
        }
        div::before{
            /* 伪元素必须要有content。没有内容引导引号内就为空的 */
            content: "";
            /* 伪元素是行内的特性，要加display：block */
            display: block;
            width: 100px;
            height: 50px;
            background-color: rosybrown;
        }
        p{
            width: 200px;
            height: 50px;
            background-color: red;
        }
        div::after{
             /* 伪元素必须要有content。没有内容引导引号内就为空的 */
              /* 伪元素是行内的特性，要加display：block */
            content: "";
            display: block;
            width: 100px;
            height: 50px;
            background-color: rosybrown;
        }
        ul{
            background-color: royalblue;
        }
        li{
            float: left;
        }
        /* ul>div{
            clear: both;
        } */
        /* 伪元素用得最多的地方就是清除浮动 */
        ul::after{
            content: "";
            display: block;
            clear: both;
        }
        /* ::before  和::after设置的元素属性相反  前者设置元素属性是在开头，而after则相反*/
    </style>
</head>
<body>
    <div>
        <p>3242345</p>
        <p>3242345</p>
        <p>3242345</p> 
         <p>3242345</p>
    </div>
    <ul>
        <li>332</li>
        <li>3r</li>
        <li>r2</li>
        <li>r2</li>
        <li>r2</li>
        <!-- <div></div> -->
    </ul>

运行结果：

在这里插入图片描述
其他伪元素

::selection 被选中得到内容

::first-letter 首字符（/是个例外

::first-line 首行

在这里插入图片描述

qq_46230474

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
12-高级选择器和伪元素应用

12-高级选择器和伪元素应用高级选择器的种类伪类选择器之状态类checked:hover:active:focus伪类选择器之结构类:nth-child(n):nth-last-child(n):nth-of-type(n):nth-last-of-type(n)伪类选择器之属性类[ att ][ att = value ][ att...
复制链接

扫一扫