伪类
伪类存在的意义是为了通过选择器找到那些不存在DOM树中的信息以及不能被常规CSS选择器获取到的信息。简单说就是弥补常规CSS选择器的不足,具体都有哪些伪类
对于大部分人来说,用到最多的就是状态和结构化的,简单使用就不多做介绍了,下面看一个比较有意思的栗子
.list li:nth-last-child(n+4) ~ li,
.list li:nth-last-child(n+4):first-child {
color: red
}
<ul class="list">
<li>列表1</li>
<li>列表1</li>
<li>列表1</li>
<li>列表1</li>
</ul>
<ul class="list">
<li>列表2</li>
<li>列表2</li>
<li>列表2</li>
</ul>
看一下是什么效果
可以看到这是完全通过css来感知子元素的个数
:nth-last-child(n+4)
这一个选择器的意思就是倒数第四个以及之前的元素,后面加了~ li
,就是表示符合前面条件的元素之后的li
元素。
如果元素总数不足4,则不会存在符合:nth-last-child(n+4)
的元素(一共没有四个,也就不存在倒数第四个),那么li:nth-last-child(n+4) ~ li
就不会选择任何的元素了。
但是如果只用~li
,是不会匹配到第一个li
的,所以又加上了li:nth-last-child(n+4):first-child
伪元素
伪元素本质上是创建了一个有内容的虚拟容器
说几种常用的伪元素
::before(在被选元素之前插入内容) ::after(在被选元素之后插入内容) 都需要指定content属性来插入内容
::first-line(匹配元素中第一行的文本,只能在块元素中使用)
::selection(匹配被用户选中的部分,只可以应用于少数的CSS属性:color, background, cursor,和outline。)
.aa::before {content: '123'}
.aa::after {content: '678'}
.aa::first-line {color: red}
.aa::selection {background: blue}
<div class="aa" style="width: 100px">内容内容内容内容内容内容内容内容内容内容内容内容</div>
区别
1.伪类的操作对象是文档树中已有的元素。伪元素则创建了一个文档树外的元素,用户可以看到这些文本,但是这些文本实际上不在文档树中。根本区别在于:有没有创建一个文档树之外的元素。
2.语法不同。CSS3规范中的要求使用双冒号(::)表示伪元素,以此来区分伪元素和伪类,比如::before和::after等伪元素使用双冒号(::),:hover和:active等伪类使用单冒号(:)。除了一些低于IE8版本的浏览器外,大部分浏览器都支持伪元素的双冒号(::)表示方法。
3.伪元素只能出现在末尾 div:hover::before 不能写div::before span