关于伪类“:pseudo-class”和伪元素“::pseudo-element”的常见应用

伪类用于指定要选择的元素的特殊状态，向其添加特殊的效果，比如：

input {
    width: 515px;
    height: 50px;
    padding: 10px 20px;
    border: 1px #fff solid;
    font-size: 16px;
    box-shadow: 0 0 21px rgba(97, 104, 124, .15);
    vertical-align: middle;
}
input:focus{
    border-color: #2bb3ee;
}

效果：

给input元素添加一个:focus伪类，当input元素获得焦点时改变其边框颜色，常用于表单输入的美化。

常见的伪类有 :active, :hover, :focus, :first-child, :disabled, :visited, :last-child, :nth-child() 等。

:active 伪类用于匹配被激活的元素，比如点击一个链接时，鼠标按下到松开之间的时间这个链接时激活的。

:hover 伪类用于匹配“悬停”或说“虚指”但是没有被激活的元素，常见案例是鼠标悬停于元素上面触发。需要注意的是：对于触摸屏的设备来说，伪类:hover不一定起作用，所以对于一些很重要的内容，最好不要设计成悬浮才显示！

:focus 伪类用于匹配获得焦点的元素，在设计表单输入时常用，让获得焦点的元素更加突出，使使用者能更快找到输入地方。

:first-child， 用法如 span:first-child 用于匹配所有元素的第一个<span>，听起来有点难理解，举个栗子：

CSS:
    span:first-child{
         color:red;
    }

html:
<div>
    <span>1</span>
    <span>2</span>
</div>

在这里，<span>1</span>会被匹配到，“1”变成红色

:first-child伪类有一个很容易用错的地方就是:

CSS:
    span:first-child{
         color:red;
    }

html:
<div>
    <a>0</a>
    <span>1</span>
    <span>2</span>
</div>

在上面的例子中，实际上span:first-child没有匹配到<span>1</span>，因为该例子里面，<span>的父元素<div>的第一个子元素是<a>，所以没有任何元素被匹配到，那如果要匹配<span>1</span>怎么办？用

span:first-of-type就可以了，这个坑在实际应用中还是很容易踩到的，应该注意一下。

:disabled 用于匹配被禁用的元素，比如给所有不可用的按钮（如未填写完时注册按钮不可用）disabled状态添加样式，让它变成灰色。

:visited 用于给已访问过的链接添加特殊的样式。

:last-child,:nth-child()用法和:first-child用法差不远。

伪元素允许给元素的某些部分添加样式。

所有伪元素有  ::before, ::after, ::first-letter, ::first-line, ::selection，其中 ::selection是属于CSS3新增的

伪元素用两个冒号是CSS3中的规定，用于区别 伪类，其实也是可以使用单冒号的，可以兼容过老版本的浏览器

值得注意的是，在伪类和伪元素结合使用时，如div::after:hover是不起效果的，div:hover::after则是有效的

::before 会在当前元素前面插入一个子元素作为伪元素。通过“content”属性来添加一些内容，比如加个箭头、标号什么的。

添加字符串:

CSS:
a:before{
        content:"链接：";
}

HTML:
<a href="https://home.cnblogs.com/u/maderlzp/">浮生若梦</a>

效果如：链接：浮生若梦

可以利用content的attr()调用当前元素的属性，如：

CSS:
a:before{
        content:"("attr(href)")";
}

HTML:
<a href="https://home.cnblogs.com/u/maderlzp/">浮生若梦</a>

效果图：

还可以使用url()引用媒体元素

CSS:
a:before{
            content:""url(https://pic.cnblogs.com/face/1149666/20170419104717.png)"";
        }

HTML:
<a href="https://home.cnblogs.com/u/maderlzp/">浮生若梦</a>

效果图：

伪元素 ::after和 ::before用法差不多

比如下图中红框部分效果就可以用 ::after做的

代码如下：

CSS：

a{
            position: relative;
            top: 41px;
            left: 50px;
        }
        a span::after{
            content: '';
            position: absolute;
            width: 10px;
            height: 10px;
            bottom: -5px;
            left: 27px;
            border: 1px solid;
            border-color: #E7E9EE #E7E9EE transparent transparent;
            -webkit-transform: rotate(135deg);
            transform: rotate(135deg);
            background: #fff;
        }
        a:hover span{
            display: block;
        }
        a span{
            display: none;
            position: absolute;
            font-style: normal;
            color: #414a60;
            width: auto;
            top:-38px;
            left:-5px;
            min-width: 44px;
            height: 31px;
            line-height: 30px;
            padding: 0 10px;
            white-space: nowrap;
            border: 1px #E7E9EE solid;
            text-align: center;
            background: #fff;
            z-index: 11;
            box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
            -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
        }

HTML:
<a><b>李雷</b><span>韩梅梅，你在哪里？</span></a>

鼠标悬停显示对话

还可以用来清除浮动、和css3的动画效果做出更多好看的页面等，这就需要发挥自己想象力了

:first-letter 选择器用于选取指定选择器的首字母。

:first-line 选择器用于选取指定选择器的首行。并且 ::first-line 伪元素只能应用在块容器中。

::selection 选择器匹配被用户选取的选取是部分。

::selection 选择器只能应用少量 CSS 属性：color, background-color, cursor, outline, text-decoration, text-emphasis-color和text-shadow。

如

CSS：

::selection
{
color:#00ff00;
}

应用上面的样式时，选取到的文字就会变成原谅色~~