[lang="de"] {
background: url("http://mdn.github.io/learning-area/css/introduction-to-css/css-selectors/de.png") 5px center no-repeat;
}
li[lang="es"] {
background: url("http://mdn.github.io/learning-area/css/introduction-to-css/css-selectors/es.png") 5px center no-repeat;
}
li[data-perf*="inc"] {
background-color: rgba(0,255,0,0.7);
}
li[data-perf*="same"] {
background-color: rgba(0,0,255,0.5);
}
li[data-perf*="dec"] {
background-color: rgba(255,0,0,0.7);
}
li[data-perf*="pro"] {
font-weight: bold;
}
li[data-perf*="rel"] {
font-style: italic;
color: #666;
}
ol {
padding: 0;
}
li {
padding: 3px 3px 3px 34px;
margin-bottom: 5px;
list-style-position: inside;
}
效果如图：
伪类和伪元素选择器
伪选择器不是选择元素，而是元素的某些部分，或仅在某些特定上下文中存在的元素。它们有两种主要类型 ： 伪类和伪元素。
伪类（Pseudo-class）
一个 CSS 伪类（pseudo-class）是一个以冒号(:)作为前缀的关键字，当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类（pseudo-class）。你可能希望某个元素在处于某种状态下呈现另一种样式，例如当鼠标悬停在元素上面时，或者当一个复选框被禁用或被勾选时，又或者当一个元素是它在 DOM 树中父元素的第一个孩子元素时。
我们不会立马深入讲解每一个伪类（pseudo-class），在学习领域中，详尽无遗地教给你每一件事不是目的。在适当的时候，你会更加详尽的了解一些内容。
一个伪类（Pseudo-class）的例子
现在，让我们来看一个简单的使用例子。首先是一个 HTML 片段：
<a href="https://developer.mozilla.org/" target="_blank">Mozilla Developer Network</a>
然后，一些 CSS 样式：
/* 这些样式将在任何情况下应用于我们
的链接 */
a {
color: blue;
font-weight: bold;
}
/* 我们想让被访问过的链接和未被访问
的链接看起来一样 */
a:visited {
color: blue;
}
/* 当光标悬停于链接，键盘激活或锁定
链接时，我们让链接呈现高亮 */
a:hover,
a:active,
a:focus {
color: darkred;
text-decoration: none;
}
现在，我们可以跟修改了样式的链接愉快地玩耍了！
例：一个条纹状的信息列表
为信息列表增加条纹状效果，然后增加合适的伪类使得里面的链接在鼠标经过时显得不同。
- 使用伪类 a：hover 实现悬停样式。
- 对于条纹状效果，你需要用到一个伪类，如
:nth-of-type()，通过给那两个颜色规则添加稍微不同的伪类，使得列表的奇数行和偶数行有着不同的样式效果。
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">Germany</a></li>
<li><a href="#">Finland</a></li>
<li><a href="#">Russia</a></li>
<li><a href="#">Spain</a></li>
<li><a href="#">Poland</a></li>
</ul>
ul {
padding: 0;
}
li {
padding: 3px;
margin-bottom: 5px;
list-style-type: none;
}
a {
text-decoration: none;
color: black;
}
a:hover {
text-decoration: underline;
color: red;
}
li:nth-of-type(2n) {
background-color: #ccc;
}
li:nth-of-type(2n+1) {
background-color: #eee;
}
效果如图：
伪元素
伪元素（Pseudo-element）跟伪类很像，但它们又有不同的地方。它们都是关键字，但这次伪元素前缀是两个冒号 (::) ， 同样是添加到选择器后面去选择某个元素的某个部分。
它们都拥有特别的行为和有趣的特性，但我们不会在这里对它们都进行深入探究。
一个伪元素（pseudo-element）例子
我们在这里仅展示一个简单的 CSS