伪类、伪元素

1、伪元素

::after	    p::after	               在每个 <p> 元素之后插入内容。
::before	    p::before	             在每个 <p> 元素之前插入内容。
::first-letter	   p::first-letter	 选择每个 <p> 元素的首字母。
::first-line	    p::first-line	     选择每个 <p> 元素的首行。
::selection	   p::selection	         选择用户选择的元素部分。

示例如下

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}  
<p class="intro">这是一段简介！</p>
<p>这是一段文字。以及更多的文字。</p>

::before 伪元素 和 ::after 伪元素

h1::before {
  //content: url(/i/photo/smile.gif);
  content: '文字，哈哈哈';
}
<h1>xxxxxx</h1>
<p>xxxxxxxx</p>
<h1>xxxxxx</h1>

::selection 伪元素（文字选中时候的效果）

::selection {
  color: red;
  background: yellow;
}
<h1>xxxxxx</h1>
<p>xxxxxxxx</p>
<h1>xxxxxx</h1>

2、伪类

伪类可以与 CSS 类结合使用：

h1.highlight:hover {
  color: #ff0000;
}
<h1>xxxxxx</h1>
<h1 class="highlight">xxxxxx</h1>

:nth-child(n)	p:nth-child(2)	       选择每个父元素的第二个子元素。
:nth-last-child(n)	p:nth-last-child(2)	   选择每个父元素的第二个子元素，从最后一个子元素开始计数。
:focus	      input:focus	           选择获得焦点的 <input> 元素。
:hover	      a:hover	               选择鼠标指针位于其上的链接。
:not(selector)	div:not(header)	   选择不是 <p> 元素的每个 <div> 元素。 
:active	      a:active	               选择当前活动（鼠标点击）的链接。
:checked	    input:checked	           选择已选中的 <input> 元素。
:disabled	   input:disabled	           选择禁用的 <input> 元素。
:empty	       p:empty	               选择没有子元素的 <p> 元素。
:enabled	    input:enabled	           选择启用的 <input> 元素。
:first-child	p:first-child	           选择属于父元素的第一个子元素的每个 <p> 元素。
:first-of-type	p:first-of-type	       选择属于其父元素的第一个 <p> 元素的每个 <p> 元素。
:in-range	   input:in-range	       选择在指定范围内定义的 <input> 元素。
:invalid	    input:invalid	       选择无效的 <input> 元素。
:lang(x)	   p:lang(it)	           选择 lang 属性值以 "it" 开头的 <p> 元素。
:last-child	p:last-child	           选择属于其父元素的最后一个子元素的每个 <p> 元素。
:last-of-type	p:last-of-type	       选择属于其父元素的最后一个 <p> 元素的每个 <p> 元素。
:link	       a:link	               选择所有未访问的链接。
:nth-last-of-type(n)	p:nth-last-of-type(2)	   选择属于其父元素的第二个最后 <p> 元素的每个 <p> 元素。
:nth-of-type(n)	p:nth-of-type(2)	   选择属于其父元素的第二个 <p> 元素的每个 <p> 元素。
:only-child	p:only-child	           选择属于其父元素的唯一子元素的每个 <p> 元素。
:only-of-type	p:only-of-type	       选择属于其父元素的唯一 <p> 元素的每个 <p> 元素。
:optional	   input:optional	       选择所有没有设置 "required" 属性的 <input> 元素。
:out-of-range	input:out-of-range	   选择不在指定范围内的 <input> 元素。
:read-only	   input:read-only	   选择所有只读 <input> 元素。
:read-write	   input:read-write	   选择所有可编辑的 <input> 元素。
:required	   input:required	   选择所有设置了 "required" 属性的 <input> 元素。
:root	       root	               选择文档的根元素。
:target	       #news:target	   选择被激活的 HTML <a> 标记。
:valid	       input:valid	   选择所有有效输入。
:visited	   a:visited	   选择所有已访问的链接。