1-2-5【CSS核心样式】初识伪类选择器

作者: Liyager | 来源:发表于2020-10-28 11:13 被阅读0次

1-2-5【CSS核心样式】初识伪类选择器
css简单标签
微信小程序样式基础
Css中样式的优先级
CSS伪类与伪元素简单了解
css杂记
巧用CSS3伪类选择器自定义checkbox和radio的样式
前端知识
CSS选择器权重
伪类和伪元素

本节课为大家以a标签为例，初步认识伪类选择器~

文章内容输出来源：拉勾教育大前端就业集训营

1.伪类

概述：伪类和类之间有一定的相似之处，也存在明显的区别。
- 普通的类：必须给标签设置对应的class属性值，才能选中标签，而且类选择器后面添加的属性，会立即加载到浏览器之上。
- 伪类：不需要给标签添加任何属性，伪类名都是语法提前规定好的，书写时伪类必须搭配其他选择器使用，伪类选择器后面添加的样式不一定立即加载到浏览器之上，只有用户触发了对应的行为，伪类的样式才会立即加载。
选择器权重：与普通的类选择器权重相同。
写法：普通选择器:伪类名

<style>
    div:after{
        content: "1";
        display: block;
    }
</style>

说明：after伪类的意思是，在某标签内部的最后一位，插入一个行内元素，了解即可，后面的课程会细讲~

2.a标签的伪类

概述：<a> 标签可以根据用户行为不同，划分为四种状态。通过<a> 标签的伪类可以将四种状态选中设置为不同的样式效果，用户触发对应行为，就可以加载对应的样式。
link：访问前的状态；

说明：

a:link是伪类选择器,.a1的意思是满足class="a1"的标签，整体相当于一个交集选择器。

可以从图中看到，默认未点击颜色为蓝色，因为link伪类，所以未点击状态颜色变为了粉色。

visited：访问后的状态；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a:visited.a1{
            color: pink;
        }
    </style>
</head>
<body>
    <a href="https://www.lagou.com" class="a1">拉勾招聘，高薪就业</a>
    <br>
    <a href="https://www.baidu.com">百度一下，你就知道</a>
</body>
</html>

说明：点击第一个超链接后，超链接颜色变为粉色；点击第二个超链接后，超链接颜色变为紫色（默认值）。

拓展：如果超链接没有点击就已经变色了，说明浏览器记住了你的访问记录，只需要在浏览器工具中“清除浏览数据”即可。

hover：鼠标悬停在上面的状态；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a:hover.a1{
            color: pink;
        }
    </style>
</head>
<body>
    <a href="https://www.lagou.com/" class="a1" target="_blank">拉勾招聘，高薪职位</a>
    <br>
    <a href="https://www.baidu.com/" target="_blank">百度一下，你就知道</a>
</body>
</html>

说明：第一个超链接设置了hover伪类，鼠标悬停时颜色变为粉色；第二个超链接没有设置，鼠标悬停时没有任何变化。

visited：鼠标点击时的状态；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a:active.a1{
            color: pink;
        }
    </style>
</head>
<body>
    <a href="https://www.lagou.com/" class="a1" target="_blank">拉勾招聘，高薪职位</a>
    <br>
    <a href="https://www.baidu.com/" target="_blank">百度一下，你就知道</a>
</body>
</html>

说明：第1个超链接，点击鼠标（不要松开），你会发现颜色变成了粉色；第2个超链接，同样点击鼠标，你会发现颜色变成了橙红色（默认值）。

3.a标签伪类书写顺序

<a> 标签上可能会同时触发2到3个状态，每个状态的属性都会进行加载，相同的属性之间会发生层叠。
伪类的权重是相同的，只能根据书写顺序，后写的层叠先写的，所以伪类书写顺序非常重要。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a:hover{
            color: greenyellow;
        }
        a:link{
            color: red;
        }
    </style>
</head>
<body>
    <a href="https://www.jd.com" target="_blank">京东购物</a>
</body>
</html>

说明：鼠标悬停在超链接上时，同时触发了“悬停”和“未访问”两种状态，由于link写在hover后面，所以超链接颜色不会发生任何变化，这不是我们希望看到的。

要想让每个伪类的状态正常加载，书写顺序必须是:访问前link、访问后visited、鼠标移上hover、鼠标点击active。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a:link {
            color: red;
        }
        a:visited {
            color: red;
        }
        a:hover {
            color: greenyellow;
        }
        a:active {
            color: hotpink;
        }
    </style>
</head>
<body>
    <a href="https://www.jd.com" target="_blank">京东购物</a>
</body>
</html>

4.a标签的伪类实际应用

一般会将访问前和访问后状态设置为一样的效果，保证了页面的统一性，可以选择性的设置鼠标移上和鼠标点击状态。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a:link,a:visited{
            background-color: #272626;
        }
        a:hover{
            background-color: rgba(255, 102, 0, 0.993);
        }
        a{
            display: block;
            width: 150px;
            height: 70px;
            text-decoration: none;
            color: white;
            font-size: 30px;
            text-align: center;
        }
        p{
            line-height: 70px;
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com">
        <p>
            首页
        </p>
    </a>
</body>
</html>

说明：模拟了一个“首页”导航栏按钮的效果实现。

更加常用的一种设置方式如下:
- <a> 标签任何普通的选择器，可以同时选中四种状态，可以将四种状态设置为相同的样式，属性可以设置所有的<a>默认显示样式的属性，包括盒模型、文字等。
- a:hover 伪类选择器:设置鼠标移上时不一样的样式属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a{
            display: block;
            width: 150px;
            height: 50px;
            background-color: skyblue;
            font: bold 30px/50px "微软雅黑";
            text-align: center;
            color: white;
            text-decoration: none;
        }
        a:hover{
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com">百度</a>
</body>
</html>