CSS3新增选择器第三部分（::selection 选择器 ::before 选择器 ::after 选择器）

最新推荐文章于 2023-07-16 16:22:37 发布

卡夫卡的baby

最新推荐文章于 2023-07-16 16:22:37 发布

阅读量308

点赞数

分类专栏： css3 文章标签： css3

本文链接：https://blog.csdn.net/weixin_72303943/article/details/125874695

版权

css3 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

8 、::selection 选择器

::selection选择器匹配元素中被用户选中或处于高亮状态的部分。

::selection只可以应用于少数的CSS属性：color, background, cursor,和outline

代码如下：

<title>::selection 选择器</title>
    <style>
        /* ::selection选择器 匹配元素中 被用户选中或处于高亮状态 的部分 */
        /* 给 被 你 选中 的文本 ， 设置 样式规则 
          被选中 的那个标签 才会显示 上面所写的 样式修饰*/
        ::selection{
            color: aqua;
            background-color: coral
        }
    </style>
</head>
<body>
    <div>人对异性产生好感的那股燃烧起来的激情里，让人感觉到自己正在真实地活着。</div>
    <p>小李子</p>
    <h1>是大蠢猪</h1>
    <a href="">憨憨</a>

注意：

cursor,和outline ，鼠标的样式和轮廓线的样式，实际预览无效果。所以，我们用这个选择器的时候，要么设置 color，要么设置background。

预览：

9 、::before 选择器

css3 :before选择器，绘制图形，并且给其设置定位，才会有作用。

:before 选择器向选定的元素前插入内容

代码如下：

<title>::before 选择器</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: cornflowerblue;
            margin: 30px auto 0;
            /* (父）相对定位 */
            position: relative;
        }
        /* 在当前盒子的前面 绘制一个图像 */
        /* 用before伪类绘制图形，有3个大前提，
        （1） 你要写content属性
        （2） 你要写定位---绝对定位
        （3） 你要给 这个before伪类图形 的父元素， 设置相对定位 （before的爸爸是box这个盒子）
        */
        .box::before{
            content: '';
            width: 100px;
            height: 200px;
            background-color: coral;
            /* （子）绝对定位 */
            /* 注意：默认 你不给它设置位置， 他在父盒子的 左上角 显示 */
            position: absolute;
            /* 如果写的是负值，那么在浏览器中盒子的位置是与vscold写的位置方向一致
               如果写的是正直，那么在浏览器中盒子的位置是在svcold中写的方向是反的
               若写的是right：50px  则是盒子靠近左边 距离右边50像素 */
            left: -100px;
            top: 0px;
        }
    </style>
</head>
<body>
    <div class="box"></div>

注意：

使用 :before 和：after 选择器的时候，一定要有content这个属性。没有这个属性，图形不显示。

预览：

10 、::after 选择器

css3 :after选择器，绘制图形，并且给其设置定位，才会有作用。

:after 选择器向选定元素的最后子元素后面插入内容。

代码如下：

<title>::before 选择器</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: cornflowerblue;
            margin: 30px auto 0;
            /* 相对定位 */
            position: relative;
        }
        /* 在当前盒子的前面 绘制一个图像 */
        /* 用before伪类绘制图形，有3个大前提，
        （1） 你要写content属性
        （2） 你要写定位---绝对定位
        （3） 你要给 这个before伪类图形 的父元素， 设置相对定位 （before的爸爸是box这个盒子）
        */
        .box::before{
            content: '';
            width: 100px;
            height: 200px;
            background-color: coral;
            /* 绝对定位 */
            /* 注意：默认 你不给它设置位置， 他在父盒子的 左上角 显示 */
            position: absolute;
            left: -100px;
            top: 0px;
        }
        .box::after{
            content: '';
            width: 100px;
            height: 100px;
            background-color: cyan;
            /* 绝对定位 */
            position: absolute;
            right: -100px;
            top: 0;
        }
    </style>
</head>
<body>
    <div class="box"></div>

预览：