CSS3中新增伪类

时间:2020-05-01

CSS 伪类 是添加到选择器的关键字,指定要选择的元素的特殊状态。例如,:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。

:last-child

代表父元素的最后一个子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        ul li:last-child{
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>php</li>
        <li>java</li>
        <li>asp</li>
    </ul>
</body>
</html>

:first-child

表示在一组兄弟元素中的第一个元素

<style type="text/css">
        ul li:first-child{
            color: red;
        }
</style>

::before

创建一个伪元素,其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        P::before{
            content: "♥";
        }
    </style>
</head>
<body>
    <p>
        test
    </p>
</body>
</html>

由::before 和::after 生成的伪元素 包含在元素格式框内, 因此不能应用在替换元素上, 比如<img>或<br> 元素。

/* CSS3 语法 */
element::before { 样式 }  

/* (单冒号)CSS2 过时语法 (仅用来支持 IE8) */
element:before  { 样式 }  

/* 在每一个p元素前插入内容 */
p::before { content: "Hello world!"; } 

::after

用来创建一个伪元素,作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。

<style type="text/css">
        P::after{
            content: "→";
        }
</style>
element:after  { style properties }  /* CSS2 语法 */

element::after { style properties }  /* CSS3 语法 */

::after表示法是在CSS 3中引入的,::符号是用来区分伪类和伪元素的。支持CSS3的浏览器同时也都支持CSS2中引入的表示法:after。

CSS伪类是用来添加一些选择器的特殊效果。

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

CSS伪元素是用来添加一些选择器的特殊效果。

CSS伪元素控制的内容和元素是没有差别的,但是它本身只是基于元素的抽象,并不存在于文档中,所以称为伪元素。

:nth-child(an+b)

首先找到所有当前元素的兄弟元素,然后按照位置先后顺序从1开始排序,选择的结果为CSS伪类:nth-child括号中表达式(an+b)匹配到的元素集合(n=0,1,2,3...)。

a 和 b 都必须为整数,并且元素的第一个子元素的下标为 1。换言之就是,该伪类匹配所有下标在集合 { an + b; n = 0, 1, 2, ...} 中的子元素。另外需要特别注意的是,an 必须写在 b 的前面,不能写成 b+an 的形式。

tr:nth-child(2n+1)
表示HTML表格中的奇数行。
tr:nth-child(odd)
表示HTML表格中的奇数行。
tr:nth-child(2n)
表示HTML表格中的偶数行。
tr:nth-child(even)
表示HTML表格中的偶数行。
span:nth-child(0n+1)
表示子元素中第一个且为span的元素,与 :first-child 选择器作用相同。
span:nth-child(1)
表示父元素中子元素为第一的并且名字为span的标签被选中
span:nth-child(-n+3)
匹配前三个子元素中的span元素。