伪类与伪元素

伪类与伪元素

伪类选择器(pseudo-class)：是对于已有元素的一些状态作出对应的样式变化，如我们最熟悉的鼠标悬停时用到的 :hover

伪元素(pseudo-element)：创建一些不存在于dom中的元素，并为其添加样式。如常用的 ::before

语法

伪类

selector:pseudo-class { property: value; }

伪元素

selector::pseudo-element { property: value; }

注：目前对于伪元素的语法，也是可以使用单冒号的，如 :before，具体使用依个人爱好，大多数浏览器都支持这两个值。

某些伪类或伪元素仍然处于试验阶段，在使用前建议先在Can I Use等网站查一查其浏览器兼容性。处于试验阶段的伪类或伪元素会在标题中标注。

一部分常用的伪类/伪元素

伪元素

:first-line 为某个元素的第一行文字使用样式；
:first-letter 为某个元素中的文字的首字母或第一个字使用样式；
:before 在某个元素之前插入一些内容；
:after 在某个元素之后插入一些内容；

状态伪类

:link 选择未访问的链接
:visited 选择已访问的链接
:hover 选择鼠标指针浮动在其上的元素
:active 选择活动的链接
:focus 选择获取焦点的输入字段

结构性伪类选择器

1. 四个最基本的：root、not、empty、target
2. first-child、last-child、nth-child、nth-last-child、 nth-child(odd)、nth-child(even)、nth-last-child(odd)、nth-last-child(even)
3. nth-of-type、nth-last-of-type

:root()选择器，从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是。“:root”选择器等同于元素；
:not()选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素；
:empty()选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格；
:target()选择器来对页面某个target元素(该元素的id被当做页面中的超链接来使用)指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用；
:first-child()选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素；
:nth-child()选择某个元素的一个或多个特定的子元素；
:nth-last-child()从某父元素的最后一个子元素开始计算，来选择特定的元素。

举个栗子

1. 中间文字，左右横线

使用伪类，准确来说是使用伪元素，:before和:after可以轻松的实现这个需求。

h3.title span {
    position: relative;   /*定位横线（当横线的父元素）*/
    display: block;     /*设置为块级元素会独占一行形成上下居中的效果*/
    font-size: 3em;
    color: #212121;
}
h3.title span:before, h3.title span:after {
    content: '';                 /*CSS伪类用法*/
    position: absolute;         /*定位背景横线的位置*/
    top: 52%;
    background: #494949;       /*宽和高做出来的背景横线*/
    width: 9%;
    height: 2px;
}
h3.title span:before{
    left: 25%;        /*调整背景横线的左右距离*/
}
h3.title span:after {
    right: 25%;
}

2.鼠标移上链接，出现方括号

.link {
	position: relative;
	display: inline-block;
	color: #000;
    text-decoration: none;
    outline: none;
	font-size: 32px;
	padding: 5px 10px;
}

.link:hover::before, .link:hover::after { position: absolute; }
.link:hover::before { content: "\5B"; left: -10px; }
.link:hover::after { content: "\5D"; right:  -10px; }

MDN传送门

伪类

伪元素