爆米花小布

# 伪类和伪元素的区别与使用

区别： 先来个例子，到后面再解释

<p>
	<em>This</em>
	<em>is a test</em>
</p>

显示如下

1555829472785

# 如果我们想要第一个em标签的字体颜色变红怎么做呢？

使用我们熟悉的伪类就可以解决

em:first-child{
    color: red;
}

显示效果如下

1555829658654

# 但是如果不存在伪类的话，我们要怎么实现呢？

这时我们就要为第一个em标签添加类

<p>
	<em class="first-child">This</em>
	<em>is a test</em>
</p>

em.first-child{
    color: red;
}

这是就可以达到一样的效果；

<p>
	<em>This</em>
	<em>is a test</em>
</p>

还是这个例子

# 那如果我想让这个段落的第一个字母变红，要怎么做呢？

这回我们需要使用伪元素

p::first-letter{
    color: red;
}

显示效果如下

1555829946362

同样假设伪元素不存在的情况下，我们该如何实现呢？

这时，我们只能嵌套span标签来实现

<p>
	<em><span>T</span>his</em>
	<em>is a test</em>
</p>

p span{
    color: red;
}

看到这里，相信大家已经清楚了为什么一个叫做伪类一个叫做伪元素

伪类的效果可以通过添加实际的类来实现

伪元素的效果可以通过添加实际的元素来实现

他们本质区别就是是否抽象创造了新元素

# ## 伪类的应用

a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */

如a标签的伪类

注意： 一定要注意前后顺序，要遵循“爱恨原则”，就是 LVHA 原则

link visited hover active 否则会出现各种状态时候样式不对的问题

**提示：**在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

**提示：**在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

**提示：**伪类名称对大小写不敏感。

# 所有CSS伪类/元素

选择器 示例 示例说明
:checked (opens new window) input:checked 选择所有选中的表单元素
:disabled (opens new window) input:disabled 选择所有禁用的表单元素
:empty (opens new window) p:empty 选择所有没有子元素的p元素
:enabled (opens new window) input:enabled 选择所有启用的表单元素
:first-of-type (opens new window) p:first-of-type 选择的每个 p 元素是其父元素的第一个 p 元素
:in-range (opens new window) input:in-range 选择元素指定范围内的值
:invalid (opens new window) input:invalid 选择所有无效的元素
:last-child (opens new window) p:last-child 选择所有p元素的最后一个子元素
:last-of-type (opens new window) p:last-of-type 选择每个p元素是其母元素的最后一个p元素
:not(selector) (opens new window) :not(p) 选择所有p以外的元素
:nth-child(n) (opens new window) p:nth-child(2) 选择所有 p 元素的父元素的第二个子元素
:nth-last-child(n) (opens new window) p:nth-last-child(2) 选择所有p元素倒数的第二个子元素
:nth-last-of-type(n) (opens new window) p:nth-last-of-type(2) 选择所有p元素倒数的第二个为p的子元素
:nth-of-type(n) (opens new window) p:nth-of-type(2) 选择所有p元素第二个为p的子元素
:only-of-type (opens new window) p:only-of-type 选择所有仅有一个子元素为p的元素
:only-child (opens new window) p:only-child 选择所有仅有一个子元素的p元素
:optional (opens new window) input:optional 选择没有"required"的元素属性
:out-of-range (opens new window) input:out-of-range 选择指定范围以外的值的元素属性
:read-only (opens new window) input:read-only 选择只读属性的元素属性
:read-write (opens new window) input:read-write 选择没有只读属性的元素属性
:required (opens new window) input:required 选择有"required"属性指定的元素属性
:root (opens new window) root 选择文档的根元素
:target (opens new window) #news:target 选择当前活动#news元素(点击URL包含锚的名字)
:valid (opens new window) input:valid 选择所有有效值的属性
:link (opens new window) a:link 选择所有未访问链接
:visited (opens new window) a:visited 选择所有访问过的链接
:active (opens new window) a:active 选择正在活动链接
:hover (opens new window) a:hover 把鼠标放在链接上的状态
:focus (opens new window) input:focus 选择元素输入后具有焦点
:first-letter (opens new window) p:first-letter 选择每个p 元素的第一个字母
:first-line (opens new window) p:first-line 选择每个p 元素的第一行
:first-child (opens new window) p:first-child 选择器匹配属于任意元素的第一个子元素的 p 元素
:before (opens new window) p:before 在每个p元素之前插入内容
:after (opens new window) p:after 在每个p元素之后插入内容
:lang(language) (opens new window) p:lang(it) 为p元素的lang属性选择一个开始值

# 伪元素的应用

伪元素就是创造一个标签，最经典的应用就是清除浮动的应用

.clearfix::after{
    content: '';
    height: 0;
    line-height: 0;
    display: block;
    clear: both;
    visibility: hidden;
}
.clearfix{
    /*兼容IE*/
    zoom: 1;
}

给需要清除浮动的元素一个 clearfix类既可以清除浮动

还有的应用就是当一个div中有小图标时，或者边框并不是盒子边框时，就可以使用

伪元素来设计。

1.父元素设置 position: relative,或者 absolute；

2.伪元素一定要设置 content，没有content的时候也要设置content: "";

3.伪元素设置position: absolute,宽高，display等

.xiaobu{
    position: relative;
    width: 100px;
    height: 40px;
    background: yellow;
}
.xiaobu::after{
    content: '';
    position: absolute;
    display: block;
    width: 10px;
    height: 10px;
    top: 50%;
    right: 10px;
    margin-top: -5px;
    border-bottom: 1px solid red;
    border-right: 1px solid red;
    transform: rotate(-45deg);
}

<div class="xiaobu"></div>

显示效果如下

1555831637037

如手机端的应用就很多出现又箭头的图标，就可以使用伪元素制作了。

还有对于手机端 1px问题，使用伪元素 制作边框也可以解决移动端边框问题

伪类和伪元素就讲到这了

← 清除浮动的原理与时机 →