閱讀(1.4k) 書(shū)簽贊(0) 我要糾錯(cuò)

Pseudo-classes and pseudo-elements

2018-05-15 17:26 更新

偽類(lèi)

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

我們現(xiàn)在不會(huì)深入到每一個(gè)偽類(lèi)中 - 學(xué)習(xí)區(qū)域的目標(biāo)不是以詳盡的細(xì)節(jié)來(lái)教你一切，而且你肯定會(huì)在后面更詳細(xì)地介紹其中的一些適當(dāng)時(shí)。

一個(gè)偽類(lèi)的例子

現(xiàn)在，讓我們看一個(gè)簡(jiǎ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)在讓我們玩我們剛剛造型的鏈接！

主動(dòng)學(xué)習(xí):斑馬條紋信息列表

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

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!

如果發(fā)生錯(cuò)誤，您可以隨時(shí)使用重置按鈕重置。如果您遇到問(wèn)題，請(qǐng)按顯示解決方案按鈕查看一個(gè)潛在的答案。

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

偽元素

偽元素非常類(lèi)似于偽類(lèi)，但它們有所不同。它們是關(guān)鍵字 - 此時(shí)前面有兩個(gè)冒號(hào)( :: )，可以添加到選擇器的末尾以選擇元素的某個(gè)部分。

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

他們都有一些非常具體的行為和有趣的功能，但挖掘它們?nèi)吭敿?xì)是超越范圍現(xiàn)在。

偽元素示例

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

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

讓我們添加這個(gè)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: '?';
}

我們得到這個(gè)結(jié)果:

主動(dòng)學(xué)習(xí)：一個(gè)花哨的段落

接下來(lái)的積極學(xué)習(xí)，我們有一個(gè)花哨的段落風(fēng)格！所有你必須做的是使用 ::第一行和 :: first-letter 偽代碼將兩個(gè)規(guī)則集應(yīng)用到段落的第一行和第一個(gè)字母元素。這應(yīng)該將段落的第一行以粗體和第一個(gè)字母作為一個(gè)漂亮的下降帽，給它一個(gè)老式的感覺(jué)。

如果發(fā)生錯(cuò)誤，您可以隨時(shí)使用重置按鈕重置。如果您遇到問(wèn)題，請(qǐng)按顯示解決方案按鈕查看一個(gè)潛在的答案。

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

下一步

我們將通過(guò)查看組合器和多個(gè)選擇器來(lái)整理CSS選擇器的游覽。

以上內(nèi)容是否對(duì)您有幫助：

← Attribute selectors

Combinators and multiple selectors →

寫(xiě)筆記

我要補(bǔ)充