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

最新推荐文章于 2024-07-18 15:25:55 发布

此时的你才是你

最新推荐文章于 2024-07-18 15:25:55 发布

阅读量199

点赞数

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

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

版权

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

12 篇文章 0 订阅

订阅专栏

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

a.:first-child

选择第一个孩子
这样写是后代选择，后代的第一个孩子也会被选中

<body>
    <main>
        <article>
           <h2>第零个儿子</h2>
            <h1>
                第一个儿子
            </h1>
            <h2>紧挨着第一个的第二个儿子</h2>
            <aside>
                <h2>这是第一个孙子</h2>
                <h2>这是最后一个孙子</h2>
            </aside>
            <h2>
                最后一个儿子
            </h2>
        </article>
    </main>
</body>

        <style>
            article :first-child{
                color: red;
            }
        </style>

在这里插入图片描述

可是我就是想选儿子辈第一，不想带后代。用之前学过的子选择器 > .

        <style>
            article> :first-child{
                color: red;
            }
        </style>

在这里插入图片描述

还可以选择类型，比如说选择在第一位的h1

 <style>
            article h1:first-child{
                color: red;
            }

        </style>

在这里插入图片描述

居然没有选中，为啥呢？

因为孩子当中，没有h1在第一位的，所以选不中。如果改一下，让h1为第一就可以选中。

<body>
    <main>
        <article>
           <!-- <h2>第零个儿子</h2> -->
            <h1>
                第一个儿子
            </h1>
            <h2>紧挨着第一个的第二个儿子</h2>
            <aside>
                <h2>这是第一个孙子</h2>
                <h2>这是最后一个孙子</h2>
            </aside>
            <h2>
                最后一个儿子
            </h2>
        </article>
    </main>
</body>

在这里插入图片描述

那我非要选择h1里面第一个h1怎么办呢？可以使用:first-of-type

        <style>{
            article h1:first-of-type{
                color: red;
            }
        </style>

在这里插入图片描述

b.:last-child

就是最后一个孩子，用法和first相同，只不过从选第一个到选最后一个。
:first child → :last child
first-of-type→:last-of-type

c.:only-child

选择唯一的孩子

<body>
    <main>     
        <article>
            <h1>我是唯一的h1</h1>
            <div>
                <h1>div第一个孩子</h1>
                <h2>div第二个孩子</h2>
            </div>
            <aside>
               <h1>我是唯一的孩子</h1>
            </aside>
        </article>
    </main>
</body>

        <style>
            article :only-child{
                color: red;
            }
        </style>

在这里插入图片描述

也可以指定种类选择，比如选择儿子辈里选择唯一个h1，用：only-of-type ，跟前面类似

        <style>
            article>h1:only-of-type {
                color: red;
            }
        </style>

在这里插入图片描述

此时的你才是你

关注

0
点赞
踩
0

收藏

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

（四）伪类选择器3.都有哪些呢？1）:超链接伪类2）结构伪类a.:first-child选择第一个孩子这样写是后代选择，后代的第一个孩子也会被选中<body> <main> <article> <h2>第零个儿子</h2> <h1> 第一个儿子 </h1> &l
复制链接

扫一扫