CSS伪类

丨Q ，Q丨

于 2019-05-16 22:35:37 发布

阅读量112

点赞数

分类专栏： html+CSS

本文链接：https://blog.csdn.net/qq2071114140/article/details/90273754

版权

html+CSS 专栏收录该内容

33 篇文章 1 订阅

订阅专栏

CSS伪类

1.什么是伪类

伪类表示元素的状态。

2.常见伪类

伪类	表示状态
link	链接处于初始状态
visited	链接处于被访问状态（根据浏览器历史记录判断）
hover	鼠标悬浮于元素时的状态
active	当元素被激活（鼠标点击）时
focus	元素拥有键盘的焦点时
first-child	该元素是父元素所有子元素的第一个
first-of-type	该元素是父元素的子元素的同类元素的第一个
selection	元素被选中

还有很多，不一一列举，请查看手册。

2.伪类选择器

作用：用样式修饰处于伪类表示的状态的元素。

语法：选择器:伪类{ CSS样式 }

当选中的元素处于伪类表示的状态时，用样式修饰该元素

举例：

当鼠标悬浮在p元素和span元素上的时候，应用样式。

...
        p:hover, span:hover{
            background-color: skyblue;
        }

...
<body>
    <p>这是一个P标签</p>
    <span>这是一个span标签</span>
</body>

由于截图原因，图片中的鼠标指针丢失

举例：

修改文字被选中的样式

...
        .test::selection{
            background-color: red;
        }
...

<body>
    <p class="test">这是一个P标签</p>
    <span>这是一个span标签</span>
</body>

注意，这种情况下，选择器和伪类之间用两个冒号连接