Pseudo-classes and pseudo-elements

偽類

CSS 偽類是一個以冒號( :)，它被添加到選擇器的末尾，以指定要在所選元素處于特定狀態(tài)時對其進行樣式化。 例如，您可能希望僅在元素被鼠標指針懸停時對其進行樣式化，或者在禁用或檢查時選中復選框，或者是DOM樹中父元素的第一個子元素。

我們現(xiàn)在不會深入到每一個偽類中 - 學習區(qū)域的目標不是以詳盡的細節(jié)來教你一切，而且你肯定會在后面更詳細地介紹其中的一些 適當時。

一個偽類的例子

現(xiàn)在，讓我們看一個簡單的如何使用這些示例。 首先，HTML代碼段:

<a  rel="external nofollow" target="_blank"  target="_blank">Mozilla Developer Network</a>

然后，一些CSS規(guī)則:

/* 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;
}

現(xiàn)在讓我們玩我們剛剛造型的鏈接！

主動學習:斑馬條紋信息列表

再次轉向 - 在這個主動學習段中，我們希望您向信息鏈接列表中添加一些斑馬條紋，還可以添加相應的偽類，以便在懸停時為鏈接設置不同的樣式。 您只需編輯本練習中的最后三條規(guī)則即可。 一些提示:

1. You have already seen how to write the second pseudo class for the hover styles.
2. 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!

如果發(fā)生錯誤，您可以隨時使用重置按鈕重置。 如果您遇到問題，請按顯示解決方案按鈕查看一個潛在的答案。

<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);

偽元素

偽元素非常類似于偽類，但它們有所不同。 它們是關鍵字 - 此時前面有兩個冒號( :: )，可以添加到選擇器的末尾以選擇元素的某個部分。

• ::after
• ::before
• ::first-letter
• ::first-line
• ::selection
• ::backdrop

他們都有一些非常具體的行為和有趣的功能，但挖掘它們?nèi)吭敿毷浅椒秶F(xiàn)在。

偽元素示例

這里我們只顯示一個簡單的CSS示例，它選擇所有絕對鏈接之后的空間，并在該空間中添加一個箭頭:

<ul>
  <li><a  rel="external nofollow" target="_blank" >CSS</a> defined in the MDN glossary.</li>
  <li><a  rel="external nofollow" target="_blank" >HTML</a> defined in the MDN glossary.</li>
</ul>

讓我們添加這個CSS規(guī)則:

/* 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 偽代碼將兩個規(guī)則集應用到段落的第一行和第一個字母 元素。 這應該將段落的第一行以粗體和第一個字母作為一個漂亮的下降帽，給它一個老式的感覺。

如果發(fā)生錯誤，您可以隨時使用重置按鈕重置。 如果您遇到問題，請按顯示解決方案按鈕查看一個潛在的答案。

<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選擇器的游覽。