css伪类怎么用？

css伪类怎么用？

伪类是用单冒号表示，如：link、:visited、:hover、:active、:focus、:first-child、:last-child、:nth-child、:nth-last-child、:not()。

1、用于链接的几个伪类元素

:link 用这个可以设置未被访问的链接的样式

:visited 用这个设置已经被访问的链接的样式

:hover 用于设置将鼠标悬浮在链接上的样式

:active 用于设置鼠标点击链接时到鼠标松开时的样式

:focus 用于设置用键盘将焦点放在链接上时的样式

上面的几个都比较简单。这里简单以:hover为例，讲解css伪类该怎么使用。（相关课程推荐：css视频教程）

<!DOCTYPE html>
<html>
<head>
<style>
    a:hover{
        background-color: yellow;
    }
</style>
</head>
<body>
 
<a href="https://www.html.cn">HTML</a>
<a href="http://www.google.com">Google</a>
<a href="http://www.wikipedia.org">Wikipedia</a>
 
<p><b>注释：</b>:hover 选择器鼠标指针在其上浮动的链接设置样式。</p>
 
</body>
</html>

2、常用于列表元素<i>的几个伪类

:first-child 选中列表中的第一个元素

:last-child 选中列表中的最后一个元素

:nth-child() 括号里面的取值可以为三类：

1)数字 :nth-child(3)表示选中父元素的第三个子元素

2)自变量为n的表达式 :nth-child(3n)代表选中父元素的第3,6,9.....3n的子元素

3)even或者odd 分别代表选中父元素的奇数或者偶数个子元素

:nth-last-child() 与 :nth-child()的不同点在于，这个是从最后一个元素开始计算，取值都是一样的。

<!DOCTYPE html>
<html>
<head>
<style> 
    p:nth-child(3){
        background:#ff0000;
    }
</style>
</head>
<body>
 
    <h1>这是标题</h1>
    <p>第一个段落。</p>
    <p>第二个段落。</p>
    <p>第三个段落。</p>
    <p>第四个段落。</p>
     
    <p><b>注释：</b>Internet Explorer 不支持 :nth-child() 选择器。</p>
     
</body>
</html>

注意是p元素的父元素<body>的第三个子元素哟，所以背景色才会出现在那个位置！！

3、:not()元素的使用

这个元素的使用很简单，举个栗子即可

<!DOCTYPE html>
<html>
<head>
<style>
    p{
        color:#000000;
    }
    :not(p){
        color:#ff0000;
    }
</style>
</head>
<body>
 
    <h1>这是标题</h1>
     
    <p>这是一个段落。</p>
     
    <p>这是另一个段落。</p>
     
    <div>这是 div 元素中的文本。</div>
     
</body>
</html>

选中非<p>的其他所有元素