CSS伪类

H56780

已于 2022-03-17 08:21:11 修改

阅读量2k

点赞数 1

文章标签： css linq 前端

于 2022-03-17 08:14:27 首次发布

本文链接：https://blog.csdn.net/H56780/article/details/123530359

版权

开发工具与关键技术： Visual Studio Code

作者：何金桥

撰写时间：2022/3/16

共有十一点

由于状态的变化是非静态的，所以元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和 class 有些类似，但它是基于文档之外的抽象，所以叫伪类。

2.伪类语法：selector:pseudo-class {property:value;}

3.CSS也可以使用伪类：selector.class:pseudo-class {property:value;}

4.Anchor伪类：在支持CSS的浏览器中，链接的不同状态都可以以不同的方式显示

举例：

a:link {color:#FF0000;} 未访问的链接
a:visited {color:#00FF00;} 已访问的链接
a:hover {color:#FF00FF;} 鼠标划过链接
a:active {color:#0000FF;} 已选中的链接

注意： 在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

注意： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

注意：伪类的名称不区分大小写。

5.伪类和css类

伪类可以与CSS类配合：

如果在上面的例子的链接已被访问，它会显示为红色

6.CSS：first-child伪类

可以使用：first-child伪类来选择元素的第一个子元素

注意：在IE8的之前版本必须声明<!DOCTYPE>,这样：first-child才能生效。

7.匹配一个元素

在下面的例子中，选择器匹配作为任何元素的第一个子元素的 元素：

8.匹配所有元素中的第一个元素

在下面的例子中，选择相匹配的所有 元素的第一个 元素：

9.匹配所有作为第一个元素的元素中的所有元素

在下面的例子中，选择器匹配所有作为元素的第一个子元素的元素中的所有元素：

例子：

10.CSS：lang伪类

lang伪类使你有能力为不同的语言定义特殊的规则

注意：IE8必须声明<!DOCTYPE>才能支持；lang伪类。

在下面的例子中，lang类为属性值为no的q元素定义引号的类型：

例子：

11.所有CSS伪类/元素

这是我所学到的CSS伪类，所以我要分享给你们，希望可以帮助到你们。

以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！

关注