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

最新推荐文章于 2024-04-24 19:55:30 发布

此时的你才是你

最新推荐文章于 2024-04-24 19:55:30 发布

阅读量171

点赞数

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

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

版权

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

12 篇文章 0 订阅

订阅专栏

二.各种选择器
（一）基本选择器
（二）结构选择器
（三）属性选择器
（四）伪类选择器
1.啥是伪类，不懂啊
CSS伪类是用来添加一些选择器的特殊效果。伪就是假的，有人说伪类跟伪娘差不多，看起来是类，其实不是类。或者说，只有特定状态下可以可以当类来用。修饰一些CSS没有的东西。
2.伪类选择器
当然是选择伪类的啦。就是为元素的不同状态或不确定存在的元素设置样式规则。
3.都有哪些呢？
1）:超链接伪类
好多元素都可以使用伪类，不单是链接
比如 :hover 鼠标悬停和划过时的显示效果，
:focus 获得聚焦对象的元素，并设置聚焦时的显示效果，
:active 控制按钮被点击时的显示效果，
:visited 访问过后的显示效果，
:link 控制未访问时的显示效果

:target 选择器

.
可以叫做锚，锚的名称是在一个文件中链接到某个元素的URL。元素被链接到目标元素。说白了就是你骂街时候指着的那个人就是锚。

<body>
    <main>
        <article>
           <a href="#dianwo">我去</a>
          <div>

          </div>
          <div id="dianwo">
            快到我这来
          </div>

        </article>
    </main>
</body>

        <style>
    div{
        height: 500px;
        border: solid 1px #ddd;
    }

    div:target{
        color: red;
    }

        </style>

.
没有点击之前

在这里插入图片描述
点击之后跳转变色

:root 选择器

就是根，所有的，可以把所有的都选择上

<body>
    <main>
        <article>
           
            <h1>思想有多远，你就给我滚多远。Think how far, you roll how far to me.</h1>
            <h2>我看起来太胖，是被生活打肿的。I look too fat. I've been beaten up by life.</h2>
            <h3>每天早点睡，没事少玩点手机，对手机不好。Go to bed early every day. Don't play with your cell phone.</h3>
            <h4>昨天是历史，今天是开始，明天谁都不好使！Yesterday is history, today is the beginning, tomorrow no one can make!</h4>

        </article>
    </main>
</body>

        <style>
            :root{
                color: red;
            }
        </style>

在这里插入图片描述

:empty 选择器

可以识别元素是否为空，再他面前不要装，你有没有点东西，人家一眼就看穿。
一个会变魔术的选择器，你要不拿出点东西，就让你消失！
某元素如果没有内容可以让其不显示。比如
加上一个p标签，并设置样式。显示是这样的

<body>
    <main>
        <article>
           <p></p>
            <h1>思想有多远，你就给我滚多远。Think how far, you roll how far to me.</h1>
            <h2>我看起来太胖，是被生活打肿的。I look too fat. I've been beaten up by life.</h2>
            <h3>每天早点睡，没事少玩点手机，对手机不好。Go to bed early every day. Don't play with your cell phone.</h3>
            <h4>昨天是历史，今天是开始，明天谁都不好使！Yesterday is history, today is the beginning, tomorrow no one can make!</h4>

        </article>
    </main>
</body>

        <style>
            :root{
                color: red;
            }
            p{
                height: 100px;
                border: solid 1px red;
            }
        </style>

在这里插入图片描述
加上：empty

        <style>
            :root{
                color: red;
            }
            p{
                height: 100px;
                border: solid 1px red;
            }
            :empty{
                display: none;
            }
        </style>

在这里插入图片描述

此时的你才是你

关注

0
点赞
踩
0

收藏

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

二.各种选择器（一）基本选择器（二）结构选择器（三）属性选择器（四）伪类选择器1.啥是伪类，不懂啊CSS伪类是用来添加一些选择器的特殊效果。伪就是假的，有人说伪类跟伪娘差不多，看起来是类，其实不是类。或者说，只有特定状态下可以可以当类来用。修饰一些CSS没有的东西。2.伪类选择器当然是选择伪类的啦。就是为元素的不同状态或不确定存在的元素设置样式规则。3.都有哪些呢？1）:超链接伪类好多元素都可以使用伪类，不单是链接比如 :hover 鼠标悬停和划过时的显示效果，:focus 获得
复制链接

扫一扫