伪类选择器，伪类的应用

最新推荐文章于 2024-04-17 16:15:40 发布

和蔼的阿木木o

最新推荐文章于 2024-04-17 16:15:40 发布

阅读量192

点赞数 1

分类专栏： css 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_59642141/article/details/125483210

版权

css 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

伪类选择器

    <style>
        a:link{          /*给a加了一个伪类叫link*/
            color: aqua;     /*未访问的颜色*/
        }
        a:visited{
            color: blue;    /*访问后的颜色*/
        }
        a:hover{        /*鼠标悬停状态*/
            color: red;
        }
        a:active{       /*鼠标点击时状态*/
            color: yellow;
        }
        /* LOVE HAte  爱恨原则*/
        /*  LV HA  */
    </style>
</head>
<body>
    <a href="#">超链接</a>
</body>

在使用 <ul> 或 <ol> 时自定义数字或项目符号的颜色，大小或类型很简单。

利用css的:marker伪元素，我们可以很轻易的更改内容以及项目符号和数字的某些样式。

::marker伪元素它作用在任何设置了display:list-item的元素或伪元素上

::marker伪元素

利用它，我们可以给元素添加一个伪元素，用于生成一个项目符号或者数字。

正常而言，我们有如下结构：

    <ul>
      <li>Contagious</li>
      <li>Stages</li>
      <li>Pages</li>
      <li>Courageous</li>
      <li>Shaymus</li>
      <li>Faceless</li>
    </ul>

利用 ::marker 我们可以对序号前面的小圆点进行改造：

    li {
      padding-left: 12px;
      cursor: pointer;
      color: #ff6000;
    }
    li::marker {
      content: '>';
    }

就可以将小圆点改造成任意我们想要的：

1、除了ul或ol下的li标签可直接使用::marker伪元素，其他元素使用需要设置display:list-item的属性才支持。

2、其次，对于::marker伪元素的样式，不是任何样式属性都能使用，目前只支持如下这样样式：（另外注意不允许的 background 属性是没有效果的）

animation-*

transition-*

color

direction

font-*

content

unicode-bidi

white-space

和蔼的阿木木o

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
伪类选择器，伪类的应用

伪类选择器，伪类的应用
复制链接

扫一扫

专栏目录

伪类选择器，伪类的应用

伪类选择器

::marker伪元素

“相关推荐”对你有帮助么？