CSS学习日记10-选择器4-伪类选择器4

最新推荐文章于 2024-07-23 16:18:27 发布

此时的你才是你

最新推荐文章于 2024-07-23 16:18:27 发布

阅读量132

点赞数

分类专栏： CSS 学习日记文章标签： css

本文链接：https://blog.csdn.net/qq_24681419/article/details/107896128

版权

CSS 学习日记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

（四）伪类选择器
3.都有哪些呢？
1）:超链接伪类
2）结构伪类

e. ：nth-last-child(n)

这个选择器跟上上一个差不多，只不过是从后往前数
比如

<body>
    <main>
        <article>
            <h1>第一行</h1>
            <h1>第二行</h1>
            <h1>第三行</h1>
            <h1>第四行</h1>
            <h1>第五行</h1>
            <h1>第六行</h1>
         </article>
    </main>
</body>

<style>
         article :nth-last-child(1){
             color: red;
         } 

        </style>

在这里插入图片描述

也可以写公式，比如-n+2，其实用法和:nth-child(n)是一毛一样。

<style>
         article :nth-last-child(-n+2){
             color: red;
         } 

        </style>

在这里插入图片描述

依然有:nth-last-of-type(n)区别种类的，就不多说了。

f :not(selector)

not，不要，不要，不要，很明显这个是排除选择器。选择那些不想要的
（注意：选择器是可以多个一起用的，但是用的时候冒号：和前一个选择器之间不要有空格，否则不好使的哦！别问我怎么知道的。）

         article :nth-child(n):not(:nth-child(2)){
             color: red;
         }

        </style>

在这里插入图片描述

此时的你才是你

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习日记10-选择器4-伪类选择器4

（四）伪类选择器3.都有哪些呢？1）:超链接伪类2）结构伪类e. ：nth-last-child(n)这个选择器跟上上一个差不多，只不过是从后往前数比如<body> <main> <article> <h1>第一行</h1> <h1>第二行</h1> <h1>第三行</h1>
复制链接

扫一扫