Pseudo-classes and pseudo-elements
伪类
CSS 伪类是一个以冒号( :)，它被添加到选择器的末尾，以指定要在所选元素处于特定状态时对其进行样式化。 例如，您可能希望仅在元素被鼠标指针悬停时对其进行样式化，或者在禁用或检查时选中复选框，或者是DOM树中父元素的第一个子元素。
:active:any:checked:default:dir():disabled:empty:enabled:first:first-child:first-of-type:fullscreen:focus:hover:indeterminate:in-range:invalid:lang():last-child:last-of-type:left:link:not():nth-child():nth-last-child():nth-last-of-type():nth-of-type():only-child:only-of-type:optional:out-of-range:read-only:read-write:required:right:root:scope:target:valid:visited
我们现在不会深入到每一个伪类中 - 学习区域的目标不是以详尽的细节来教你一切，而且你肯定会在后面更详细地介绍其中的一些 适当时。
一个伪类的例子
现在，让我们看一个简单的如何使用这些示例。 首先，HTML代码段:
<a href="https://developer.mozilla.org/" target="_blank">Mozilla Developer Network</a>
然后，一些CSS规则:
/* These styles will style our link
in all states */
a {
color: blue;
font-weight: bold;
}
/* We want visited links to be the same color
as non visited links */
a:visited {
color: blue;
}
/* We highlight the link when it is
hovered (mouse), activated
or focused (keyboard) */
a:hover,
a:active,
a:focus {
color: darkred;
text-decoration: none;
}
现在让我们玩我们刚刚造型的链接！
主动学习:斑马条纹信息列表
再次转向 - 在这个主动学习段中，我们希望您向信息链接列表中添加一些斑马条纹，还可以添加相应的伪类，以便在悬停时为链接设置不同的样式。 您只需编辑本练习中的最后三条规则即可。 一些提示:
- You have already seen how to write the second pseudo class for the hover styles.
- For the zebra striping you'll need to use a pseudo class like
:nth-of-type(), giving the two color rules a slightly different version of the pseudo class to style the even and odd numbered list items. See if you can look up how to do this!
如果发生错误，您可以随时使用重置按钮重置。 如果您遇到问题，请按显示解决方案按钮查看一个潜在的答案。
Playable code 5
<div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;">
<h2>HTML Input</h2>
<textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><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></textarea>
<h2>CSS Input</h2>
<textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">ul {
padding: 0;
}
li {
padding: 3px;
margin-bottom: 5px;
list-style-type: none;
}
a {
text-decoration: none;
color: black;
}
{
text-decoration: underline;
color: red;
}
{
background-color: #ccc;
}
{
background-color: #eee;
}</textarea>
<h2>Output</h2>
<div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;overflow:auto;"></div>
<div class="controls">
<input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;">
<input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;">
</div>
</div>
var htmlInput = document.querySelector(".html-input");
var cssInput = document.querySelector(".css-input");
var reset = document.getElementById("reset");
var htmlCode = htmlInput.value;
var cssCode = cssInput.value;
var output = document.querySelector(".output");
var solution = document.getElementById("solution");
var styleElem = document.createElement('style');
var headElem = document.querySelector('head');
headElem.appendChild(styleElem);
function drawOutput() {
output.innerHTML = htmlInput.value;
styleElem.textContent = cssInput.value;
}
reset.addEventListener("click", function() {
htmlInput.value = htmlCode;
cssInput.value = cssCode;
drawOutput();
});
solution.addEventListener("click", function() {
htmlInput.value = htmlCode;
cssInput.value = 'ul {\n padding: 0;\n}\n\nli {\n padding: 3px;\n margin-bottom: 5px;\n list-style-type: none;\n}\n\na {\n text-decoration: none;\n color: black;\n}\n\na:hover {\n text-decoration: underline;\n color: red;\n}\n\nli:nth-of-type(2n) {\n background-color: #ccc;\n}\n\nli:nth-of-type(2n+1) {\n background-color: #eee;\n}';
drawOutput();
});
htmlInput.addEventListener("input", drawOutput);
cssInput.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);
伪元素
伪元素非常类似于伪类，但它们有所不同。 它们是关键字 - 此时前面有两个冒号( :: )，可以添加到选择器的末尾以选择元素的某个部分。
他们都有一些非常具体的行为和有趣的功能，但挖掘它们全部详细是超越范围现在。
伪元素示例
这里我们只显示一个简单的CSS示例，它选择所有绝对链接之后的空间，并在该空间中添加一个箭头:
<ul> <li><a href="https://developer.mozilla.org/en-US/docs/Glossary/CSS">CSS</a> defined in the MDN glossary.</li> <li><a href="https://developer.mozilla.org/en-US/docs/Glossary/HTML">HTML</a> defined in the MDN glossary.</li> </ul>
让我们添加这个CSS规则:
/* All elements with an attribute "href", which values
start with "http", will be added an arrow after its
content (to indicate it's an external link) */
[href^=http]::after {
content: '⤴';
}
我们得到这个结果:
主动学习：一个花哨的段落
接下来的积极学习，我们有一个花哨的段落风格！ 所有你必须做的是使用 ::第一行和 :: first-letter 伪代码将两个规则集应用到段落的第一行和第一个字母 元素。 这应该将段落的第一行以粗体和第一个字母作为一个漂亮的下降帽，给它一个老式的感觉。
如果发生错误，您可以随时使用重置按钮重置。 如果您遇到问题，请按显示解决方案按钮查看一个潜在的答案。
Playable code 6
<div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;">
<h2>HTML Input</h2>
<textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><p>This is my very important paragraph.
I am a distinguished gentleman of such renown that my paragraph
needs to be styled in a manner befitting my majesty. Bow before
my splendour, dear students, and go forth and learn CSS!</p></textarea>
<h2>CSS Input</h2>
<textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"> {
font-weight: bold;
}
{
font-size: 3em;
border: 1px solid black;
background: red;
display: block;
float: left;
padding: 2px;
margin-right: 4px;
}</textarea>
<h2>Output</h2>
<div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;overflow:auto;"></div>
<div class="controls">
<input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;">
<input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;">
</div>
</div>
var htmlInput = document.querySelector(".html-input");
var cssInput = document.querySelector(".css-input");
var reset = document.getElementById("reset");
var htmlCode = htmlInput.value;
var cssCode = cssInput.value;
var output = document.querySelector(".output");
var solution = document.getElementById("solution");
var styleElem = document.createElement('style');
var headElem = document.querySelector('head');
headElem.appendChild(styleElem);
function drawOutput() {
output.innerHTML = htmlInput.value;
styleElem.textContent = cssInput.value;
}
reset.addEventListener("click", function() {
htmlInput.value = htmlCode;
cssInput.value = cssCode;
drawOutput();
});
solution.addEventListener("click", function() {
htmlInput.value = htmlCode;
cssInput.value = 'p::first-line {\n font-weight: bold;\n}\n\np::first-letter {\n font-size: 3em;\n border: 1px solid black;\n background: red;\n display: block;\n float: left;\n padding: 2px;\n margin-right: 4px;\n}';
drawOutput();
});
htmlInput.addEventListener("input", drawOutput);
cssInput.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);
下一步
我们将通过查看组合器和多个选择器来整理CSS选择器的游览。