阅读(1.8k) 书签赞(0) 我要纠错

Pseudo-classes and pseudo-elements

2018-05-15 17:26 更新

伪类

CSS 伪类是一个以冒号( :)，它被添加到选择器的末尾，以指定要在所选元素处于特定状态时对其进行样式化。例如，您可能希望仅在元素被鼠标指针悬停时对其进行样式化，或者在禁用或检查时选中复选框，或者是DOM树中父元素的第一个子元素。

我们现在不会深入到每一个伪类中 - 学习区域的目标不是以详尽的细节来教你一切，而且你肯定会在后面更详细地介绍其中的一些适当时。

一个伪类的例子

现在，让我们看一个简单的如何使用这些示例。首先，HTML代码段:

<a href="https://link.w3cschool.cn/?target=https%3A%2F%2Fdeveloper.mozilla.org%2F" rel="external nofollow" target="_blank"  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://link.w3cschool.cn/?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FGlossary%2FCSS" rel="external nofollow" target="_blank" >CSS</a> defined in the MDN glossary.</li>
  <li><a href="https://link.w3cschool.cn/?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FGlossary%2FHTML" rel="external nofollow" target="_blank" >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选择器的游览。

以上内容是否对您有帮助：

← Attribute selectors

Combinators and multiple selectors →

写笔记

我要补充