CSS面试题

最新推荐文章于 2024-10-08 09:33:56 发布

Dormiveglia-flx

最新推荐文章于 2024-10-08 09:33:56 发布

阅读量410

点赞数

分类专栏： HTML5+ES6-ES13+CSS3 文章标签： css css3 前端

本文链接：https://blog.csdn.net/sugerfle/article/details/129619239

版权

HTML5+ES6-ES13+CSS3 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

CSS面试题

CSS 伪类和伪元素

伪类：以冒号(:)开头，用于选择处于特定状态的元素。
伪元素：以双冒号(::)开头，用于在文档中插入虚构的元素。且作为子元素插入。

伪类的常见分类：

动态伪类：:visited、:focus、:hover等
状态伪类：:disabled、:empty、:required 等
结构伪类：:first-child、:nth-of-type等
其他伪类：:target、:lang、:not()等

结构伪类有一个好处是：通过文档结构的相互关系来定位元素，减少id与class的定义。

在这里插入图片描述

伪元素最常用就是用 ::before 和 ::after给某个元素添加前缀或后缀
通常伪元素会利用子绝父相来进行定位

附上链接

CSS中的文字阴影与盒子阴影

在这里插入图片描述

<style>
        p {
            font-size: 50px;
            font-weight: 700;
            text-shadow: 10px 10px 20PX red;
            color :#ccc;

        }
</style>

<body>
    <p>天上人间</p>
</body>

在这里插入图片描述

 <style>
        .box {
            width: 400px;
            height: 400px;
            background-color: pink;
            margin: 100px auto;
            border-radius: 30px;
            box-shadow: 0 0 20px 5px #ccc;
        }

</style>

<body>
    <div class="box"></div>
</body>