伪类与伪元素

参考资料 https://juejin.im/post/5c35953ce51d45523f04b6d2

其实想认真的学习一下这个是有原因的，在掘金上看到了一个超有意思的纯CSS实现的进度条，如果让我来写的话，确实是比较可能直接用JS实现，而且都感觉写起来很麻烦。真的是太炫酷了。

然后伪类和伪元素也经常搞的混淆概念不清楚，也打算整理一下，想要稍微区分清楚一下就好了。

伪类

具有特殊属性的元素可以使用CSS进行样式修饰（我认为是为了一些元素添加特殊的效果）

常见的：:link，:active，:hover，:visited，:first-child，:nth-child，:last-child

写几个简单的🌰

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    a:link {
        color: #FF0000
    }

    a:visited {
        color: #00FF00
    }

    a:hover {
        color: #FF00FF
    }

    a:active {
        color: #0000FF
    }

    p:hover {
        color: red;
    }
</style>

<body>
    <a href="https://qinhanwen.github.io/">https://qinhanwen.github.io/</a>
    <p>hover</p>
</body>

</html>

emm.. 直接复制一下看效果吧

伪元素

不存在与文档或者DOM树中，可以通过CSS创建

常见的：:after，:before，:first-letter

CSS3中引入双冒号(::)，为了区分伪类和伪元素，比如::after，因为为了兼容，:和::都可以，但是在IE的情况比较特殊（忽略不计吧）。

使用伪元素需要注意的几个问题：

1）伪元素如果没有设置“content”属性，伪元素是无用的，可以设置content属性值为空，并且仅仅把他当做一个内容很少的盒子，比如：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    body::after {
        width: 200px;
        height: 200px;
        content: "";
        background: red;
        display: block;
    }
</style>
<body>
</body>I 
</html>

可以看到，如果没有设置content和display:block，就显示不了，所以content必不可少，而且它是一个行内元素。

WX20190113-171923@2x

2）before和after

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    body::before {
        width: 200px;
        height: 200px;
        content: "";
        background: red;
        display: block;
    }

    body::after {
        width: 200px;
        height: 200px;
        content: "";
        background: red;
        display: block;
    }
</style>

<body>
    这里是body
</body>

</html>

before和after，一前一后：

WX20190113-174943@2x

3）content

设置url，像CSS的背景图片一样

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    body::before {
        width: 200px;
        height: 200px;
        display: block;
        content: "";
        background: url("http://114.55.30.96/WX20190113-175906@2x.png");
        background-size:200px 200px;
    }
    body::after {
        width: 200px;
        height: 200px;
        display: block;
        content: url('http://114.55.30.96/WX20190113-175906@2x.png');
    }
</style>

<body>

</body>

</html>

不过不建议使用content:url(“”)，不方便控制，可以使用background:url(“”);

WX20190113-181413@2x

大概了解一下就迫不及待的想要实现纯CSS进度条了吧

1）我们先创建一大段文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>这里放了一大段文本，请自己复制一大段，一定要很大一段</p>
</body>
</html>

然后看到这样子出现了滚动条的样子

WX20190113-000826@2x

2）设置背景渐变

首先需要大概了解一下linear-gradient

我们为body添加样式

* {
    margin: 0;
    padding: 0;
} 
body{
      background-image: linear-gradient(to right top,red 50%,white 50%);
}

然后看到这样子的效果

WX20190113-165715@2x

3) 添加伪元素

body::after {
    position: fixed;
    top: 10px;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    content: "";
    z-index: -1;
}

progress-bar

然后发现，拉到底下还差一段，这样子显的很难看

WX20190113-182423@2x

css3新单位vh，view height的简写，是指可视窗口的高度。假如高度是1200px的话。那10vh就是120px；

还有calc，动态计算值

我的目的就是让渐变色，当我下拉到最底部的时候，进度条占满宽度，那么我应该让渐变色的高度，等于body的高度减去一个屏幕的高度。

1	background-size:100% calc(100% - 100vh);

当我这样写的时候，我发现拉到最底下的时候，进度条不见了，原来是漏掉了进度条的高度，修改一下

1	background-size:100% calc(100% - 100vh + 10px);

完成之后是这样子的

progress-bar2