runsly html+css教程 2023-04-25

CSS3新增伪类有哪些?（总结附代码）

本篇文章主要给大家介绍
css3新增伪类有哪些？

首先大家应该都知道css是什么吧？

CSS是Cascading Style Sheet的缩写。译作”层叠样式表单“。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。简单的说CSS就是用于控制网页的样式和布局。而css3是最新的 CSS 标准。

那么这个最新的标准，相较于css2的标准有哪些新增的属性或者伪类呢？

下面我们就为大家详细总结介绍，css新增的一些伪类。

1、p:first-of-type

:first-of-type 选择器匹配属于其父元素的特定类型的首个子元素的每个元素。

使用示例：

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>:first-of-type使用示例</title>
<head>
    <style>
        p:first-of-type
        {
            background:green;
        }
    </style>
</head>
<body>
<h1>:first-of-type使用示例</h1>
<p>这是第一个p元素。<br>:first-of-type，指定父元素的首个 p 元素的背景色。</p>
<p>这是第二个p元素</p>
<p>这是第三个p元素</p>
<p>这是第四个p元素</p>
</body>
</html>

效果如下图：

2、p:last-of-type

:last-of-type 选择器匹配属于其父元素的特定类型的最后一个子元素的每个元素。

用法示例：

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>:last-of-type使用示例</title>
<head>
    <style>
        p:last-of-type
        {
            background: #ff3844;
        }
    </style>
</head>
<body>
<h1>p:last-of-type使用示例</h1>
<p>这是第一个p元素。</p>
<p>这是第二个p元素</p>
<p>这是第三个p元素</p>
<p>这是第四个p元素<br>:last-of-type，指定父元素的最后一个 p 元素的背景色。</p>
</body>
</html>

效果如下图：