css引入伪类和伪元素概念是为了格式化文档树以外的信息。
伪元素&伪类：
css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分；比如，一句话中的第一个字母，或者是列表中的第一个元素。下面分别对伪类和伪元素进行解释：
伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。
伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。
伪元素&伪类的特点：
- 伪元素和伪类都不会出现在源文档或者文档树中
- 伪类允许出现在选择器的任何位置，而一个伪元素只能跟在选择器的最后一个简单选择器后面
- 伪元素名和伪类名都是大小写不敏感的
- 有些伪类是互斥的，而其它的可以同时用在一个元素上。（在规则冲突的情况下，常规层叠顺序决定结果）。
伪元素和伪类的区别：
- 伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档数外的元素。因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。
伪元素：
-
伪元素用于创建一些不在文档树中的元素并为其添加样式。
image.png
单双冒号：
- E::before/E:before在E元素内部创建一个行内元素，作为E的第一个孩子,需要使用content属性来指定要插入的内容。被插入的内容实际上不在文档树中;
- E::after/E:after 在E元素内部创建一个行内元素，作为E的最后一个孩子,其用法和特性与:before相似;
- E::first-letter/E:first-letter匹配E元素内容的第一个字母,被修饰的首字母不在文档树中;
- E::first-lineE/:first-line 匹配E元素内容的第一行,这个伪元素只能用在块元素中，不能用在内联元素中
双冒号：
- E::selection应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）改变字体大小，添加背景色等等,在火狐浏览器使用时需要添加-moz前缀。该伪元素只支持双冒号的形式；
::-moz-selection {
color: orange;
background: #333;
}
::selection {
color: orange;
background: #333;
}
- E::placeholder匹配占位符的文本，只有元素设置了placeholder属性时，该伪元素才能生效;用于修改input默认的灰色文字的样式，字体大小和字体颜色等等；为了浏览器兼容性，一般写为： input::-webkit-input-placeholder,
该伪元素不是CSS的标准，它的实现可能在将来会有所改变，所以要决定使用时必须谨慎。在一些浏览器中（IE10和Firefox18及其以下版本）会使用单冒号的形式；
<input type="email" placeholder="name@domain.com">
input::-moz-placeholder {
color:#666;
}
input::-webkit-input-placeholder {
color:#666;
}
/* IE 10 only */
input:-ms-input-placeholder {
color:#666;
}
/* Firefox 18 and below */
input:-moz-input-placeholder {
color:#666;
}
- E::backdorp是在任何处于全屏模式的元素下的即刻渲染的盒子（并且在所有其他在堆中的层级更低的元素之上）,用于改变全屏模式下的背景颜色，全屏模式的默认颜色为黑色。该伪元素只支持双冒号的形式,该伪类用得少，兼容性差，甚至许多浏览器并未使用该功能）
<h1 id="element">This heading will have a solid background color in full-screen mode.</h1>
<button onclick="var el = document.getElementById('element'); el.webkitRequestFullscreen();">Trigger full screen!</button>
h1:fullscreen::backdrop {
background: orange;
}
- CSS3规范中的要求使用双冒号(::)表示伪元素，以此来区分伪元素和伪类，比如::before和::after等伪元素使用双冒号(::)，:hover和:active等伪类使用单冒号(:)。除了一些低于IE8版本的浏览器外，大部分浏览器都支持伪元素的双冒号(::)表示方法。然而，除了少部分伪元素，如::backdrop必须使用双冒号，大部分伪元素都支持单冒号和双冒号的写法，比如::after，写成:after也可以正确运行；但是为了向后兼容，目前在考虑兼容性的情况下可以使用单冒号的写法，但是也建议全都使用双冒号；
- 使用::before和::after为了节省标签，其中content不可或缺但是可以是空字符；可以用于清除浮动，替换标签。
- 某些伪类或伪元素仍然处于试验阶段，在使用前建议先在Can I Use等网站查一查其浏览器兼容性。
伪类：
-
CSS 伪类是添加到选择器的关键字，指定要选择的元素的特殊状态。例如，:hover可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。
image.png
状态:
- :link用于选择未访问的链接；
- :visited用于选择已访问的链接；
- :hover用于选择鼠标指针浮动在其上的元素；
- :active用于选择活动的链接；
- :focus用于选择获取焦点的输入字段。
结构化：
- :not是一个否定伪类，用于匹配不符合参数选择器的元素。
<ul>
<li class="first-item">一些文本</li>
<li>一些文本</li>
<li>一些文本</li>
<li>一些文本</li>
</ul>
li:not(.first-item) {
color: orange;
}
- 上述列表除了第一个<li>元素外，其他<li>元素的文本都会变为橙色。
- :first-child用于匹配元素的第一个子元素。
- : last-child用于匹配元素的最后一个子元素。
- ：first-of-type用于匹配属于其父元素的首个特定类型的子元素的每个元素。
- :last-of-type用于匹配元素的最后一个子元素。
- :nth-child根据元素的位置匹配一个或者多个元素，它接受一个an+b形式的参数，an+b匹配到的元素示例如下：
- 1n+0，或n，匹配每一个子元素。
- 2n+0，或2n，匹配位置为2、4、6、8…的子元素，该表达式与关键字even等价。
- 2n+1匹配位置为1、3、5、7…的子元素、该表达式与关键字odd等价。
- 3n+4匹配位置为4、7、10、13…的子元素。
如下例，有以下HTML列表：
<ol>
<li>Alpha</li>
<li>Beta</li>
<li>Gamma</li>
<li>Delta</li>
<li>Epsilon</li>
<li>Zeta</li>
<li>Eta</li>
<li>Theta</li>
<li>Iota</li>
<li>Kappa</li>
</ol>
CSS:
选择第二个元素，”Beta”会变成橙色：
ol :nth-child(2) {
color: orange;
}
选择位置序号是2的倍数的元素，”Beta”, “Delta”, “Zeta”, “kappa”会变成橙色:
ol :nth-child(2n) {
color: orange;
}
选择位置序号为偶数的元素：
ol :nth-child(even) {
color: orange;
}
选择从第6个开始，位置序号是2的倍数的元素，”Zeta”, “Theta”, “Kappa”会变成橙色：
ol :nth-child(2n+6) {
color: orange;
}
- :nth-last-child与:nth-child相似，不同之处在于它是从最后一个子元素开始计数的。
- :nth-of-type与nth-child相似，不同之处在于它是只匹配特定类型的元素。
如下例，第二个<p>元素会变为橙色。
HTML:
<article>
<h1>我是标题</h1>
<p>一些文本</p>
<a href=""><img src="images/rwd.png" alt="Mastering RWD"></a>
<p>这里的文本是橙色的</p>
</article>
p:nth-of-type(2) {
color: orange;
}
- :nth-last-of-type与nth-of-type相似，不同之处在于它是从最后一个子元素开始计数的。
- 当元素是其父元素中唯一一个子元素时，:only-child匹配该元素。
<ul>
<li>这里的文本是橙色的</li>
</ul>
<ul>
<li>一些文本</li>
<li>一些文本</li>
</ul>
ul :only-child {
color: orange;
}
- :only-of-type用于当元素是其父元素中唯一一个特定类型的子元素时，:only-child匹配该元素。
如下例，第一个ul元素只有一个li类型的元素，该li元素的文本会变为橙色。
<ul>
<li>这里的文本是橙色的</li>
<p>这里不是橙色</p>
</ul>
<ul>
<li>一些文本</li>
<li>一些文本</li>
</ul>
li:only-of-type {
color: orange;
}
- :target是当该页面的URL带有锚名称，指向文档内某个具体的元素时，:target匹配该元素。
如下例，url中的target命中id值为target的article元素，article元素的背景会变为黄色。
URL:
http://example.com/#target
<article id="target">
<h1><code>:target</code> pseudo-class</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit!</p>
</article>
:target {
background: yellow;
}
表单相关：
- :checked匹配被选中的input元素，这个input元素包括radio和checkbox。
如下例，当复选框被选中时，与其相邻的<label>元素的背景会变成黄色。
<input type="checkbox"/>
<label>我同意</label>
input:checked + label {
background: yellow;
}
- :default匹配默认选中的元素，例如：提交按钮总是表单的默认按钮。
如下例，只有提交按钮的背景变成了黄色。
<form action="#">
<button>重置</button>
<button type="submit">提交</button>
</form>
:default {
background: yellow;
}
- :disabled匹配禁用的表单元素。
如下例，被禁用input输入框的透明度会变成50%。
<input type="text" disabled/>
:disabled {
opacity: .5;
}
- :empty匹配没有子元素的元素。如果元素中含有文本节点、HTML元素或者一个空格，则:empty不能匹配这个元素。
如下例，:empty能匹配的元素会变为黄色。
第一个元素中有文本节点，所以其背景不会变成黄色；
第二个元素中有一个空格，有空格则该元素不为空，所以其背景不会变成黄色；
第三个元素中没有任何内容，所以其背景会变成黄色；
第四个元素中只有一个注释，此时该元素是空的，所以其背景会变成黄色；
<div>这个容器里的背景是橙色的</div>
<div> </div>
<div></div>
<div><!-- This comment is not considered content --></div>
div {
background: orange;
height: 30px;
width: 200px;
}
div:empty {
background: yellow;
}
- :enabled用于匹配没有设置disabled属性的表单元素。
- :in-range匹配在指定区域内元素。
如下例，当数字选择器的数字在5到10是，数字选择器的边框会设为绿色。
<input type="number" min="5" max="10">
input[type=number] {
border: 5px solid orange;
}
input[type=number]:in-range {
border: 5px solid green;
}
- :out-of-range与:in-range相反，它匹配不在指定区域内的元素。
- indeterminate的英文意思是“不确定的”。当某组中的单选框或复选框还没有选取状态时，:indeterminate匹配该组中所有的单选框或复选框。
如下例，当下面的一组单选框没有一个处于被选中时，与input相邻的label元素的背景会被设为橙色。
<ul>
<li>
<input type="radio" name="list" id="option1">
<label for="option1">Option 1</label>
</li>
<li>
<input type="radio" name="list" id="option2">
<label for="option2">Option 2</label>
</li>
<li>
<input type="radio" name="list" id="option3">
<label for="option3">Option 3</label>
</li>
</ul>
:indeterminate + label {
background: orange;
}
- :valid匹配条件验证正确的表单元素。
如下例，当email输入框内的值符合email格式时，输入框的边框会被设为绿色。
<input type="email"/>
input[type=email]:valid {
border: 1px solid green;
}
- :invalid与:valid相反，匹配条件验证错误的表单元素。
- :optional用于匹配是具有optional属性的表单元素。当表单元素没有设置为required时，即为optional属性。
如下例，第一个input的背景不会被设为黄色，第二个input的背景会被设为黄色。
<input type="text" required />
<input type="text" />
:optional {
background: yellow;
}
:required与:optional相反匹配设置了required属性的表单元素。
:read-only匹配设置了只读属性的元素，表单元素可以通过设置“readonly”属性来定义元素只读。
如下例，input元素的背景会被设为黄色。
<input type="text" value="I am read only" readonly>
put:read-only {
background-color: yellow;
}
- :read-write匹配处于编辑状态的元素。input，textarea和设置了contenteditable的HTML元素获取焦点时即处于编辑状态。
如下例，input输入框和副文本框获取焦点时，背景变成黄色。
<input type="text" value="获取焦点时背景变黄"/>
<div class="editable" contenteditable>
<h1>点击这里可以编辑</h1>
<p>获取焦点时背景变黄</p>
</div>
:read-write:focus {
background: yellow;
}
- :scope(处于试验阶段)匹配处于style作用域下的元素。当style没有设置scope属性时，style内的样式会对整个html起作用。
如下例，第二个section中的元素的文本会变为斜体。
<article>
<section>
<h1>很正常的一些文本</h1>
<p>很正常的一些文本</p>
</section>
<section>
<style scoped>
:scope {
font-style: italic;
}
</style>
<h1>这里的文本是斜体的</h1>
<p>这里的文本是斜体的</p>
</section>
</article>
注：目前支持这个伪类的浏览器只有火狐。
语言相关
- :dir(处于实验阶段)匹配指定阅读方向的元素，当HTML元素中设置了dir属性时该伪类才能生效。现时支持的阅读方向有两种：ltr（从左往右）和rtl（从右往左）。目前，只有火狐浏览器支持:dir伪类，并在火狐浏览器中使用时需要添加前缀( -moz-dir() )。
如下例，p元素中的阿拉伯语（阿拉伯语是从右往左阅读的）文本会变成橙色。
<article dir="rtl">
<p>التدليك واحد من أقدم العلوم الصحية التي عرفها الانسان والذي يتم استخدامه لأغراض الشفاء منذ ولاده الطفل.</p>
</article>
/* prefixed */
article :-moz-dir(rtl) {
color: orange;
}
/* unprefixed */
article :dir(rtl) {
color: orange;
}
如下例，p元素中的英语文本会变成蓝色
<article dir="ltr">
<p>اIf you already know some HTML and CSS and understand the principles of responsive web design, then this book is for you.</p>
</article>
article :-moz-dir(ltr) {
color: blue;
}
/* unprefixed */
article :dir(ltr) {
color: blue;
}
- :lang匹配设置了特定语言的元素，设置特定语言可以通过为了HTML元素设置lang=””属性，设置meta元素的charset=””属性，或者是在http头部上设置语言属性。实际上，lang=””属性不只可以在html标签上设置，也可以在其他的元素上设置。
如下例，分别给不同的语言设置不同的引用样式：
<article lang="en">
<q>Lorem ipsum dolor sit amet.</q>
</article>
<article lang="fr">
<q>Lorem ipsum dolor sit amet.</q>
</article>
<article lang="de">
<q>Lorem ipsum dolor sit amet.</q>
</article>
:lang(en) q { quotes: '“' '”'; }
:lang(fr) q { quotes: '«' '»'; }
:lang(de) q { quotes: '»' '«'; }
其他
- :root匹配文档的根元素。一般的html文件的根元素是html元素，而SVG或XML文件的根元素则可能是其他元素。
如下例，将html元素的背景设置为橙色
:root {
background: orange;
}
- :fullscreen匹配处于全屏模式下的元素。全屏模式不是通过按F11来打开的全屏模式，而是通过Javascript的Fullscreen API来打开的，不同的浏览器有不同的Fullscreen API。目前，:fullscreen需要添加前缀才能使用。
如下例，当处于全屏模式时，h1元素的背景会变成橙色
<h1 id="element">在全屏模式下，这里的文本的背景会变成橙色.</h1>
<button>进入全屏模式!</button>
JAVASCRIPT:
var docelem = document.getElementById('element');
var button = document.querySelector('button');
button.onclick = function() {
if (docelem.requestFullscreen) {
docelem.requestFullscreen();
}else if (docelem.webkitRequestFullscreen) {
docelem.webkitRequestFullscreen();
} else if(docelem.mozRequestFullScreen) {
docelem.mozRequestFullScreen();
} else if(docelem.msRequestFullscreen) {
docelem.msRequestFullscreen();
}
}
CSS:
h1:fullscreen {
background: orange;
}
h1:-webkit-full-screen {
background: orange;
}
h1:-moz-full-screen {
background: orange;
}
h1:-ms-fullscreen {
background: orange;
}
