Simple selectors
由于歷史原因，有人把元素選擇器也叫做類(lèi)型選擇器，這會(huì)和類(lèi)選擇器產(chǎn)生歧義
This selector is just a case-insensitive match between the selector name and a given HTML element name. This is the simplest way to target all elements of a given type. 讓我們一起看看下面這個(gè)例子:
這是HTML:
<p>What color do you like?</p> <div>I like blue.</div> <p>I prefer red!</p>
這是樣式表:
/* All p elements are red */
p {
color: red;
}
/* All div elements are blue */
div {
color: blue;
}
我們得到這個(gè):
主動(dòng)學(xué)習(xí):選擇不同的元素
對(duì)于這種主動(dòng)學(xué)習(xí)，我們希望您嘗試在單個(gè)CSS規(guī)則上更改選擇器，以便對(duì)示例中的不同元素進(jìn)行樣式化。 你知道如何編寫(xiě)一個(gè)選擇器來(lái)同時(shí)將規(guī)則集應(yīng)用到多個(gè)元素？
如果發(fā)生錯(cuò)誤，您可以隨時(shí)使用重置按鈕重置。 如果您遇到問(wèn)題，請(qǐng)按顯示解決方案按鈕查看一個(gè)潛在的答案。
Playable code
<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;"><h1>Hello World!</h1>
<p>This is a paragraph.</p>
<ul>
<li>This is</li>
<li>A list</li>
</ul></textarea>
<h2>CSS Input</h2>
<textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">h1 {
? color: red;
? text-shadow: 1px 1px 1px black;
? background: linear-gradient(to bottom, rgba(0,0,0,0.25), rgba(0,0,0,0.1));
? padding: 3px;
? text-align: center;
? box-shadow: inset 2px 2px 5px rgba(0,0,0,0.5), inset -2px -2px 5px rgba(255,255,255,0.5);
}</textarea>
<h2>Output</h2>
<div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></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 {\n color: red;\n text-shadow: 1px 1px 1px black;\n? background: linear-gradient(to bottom, rgba(0,0,0,0.25), rgba(0,0,0,0.1));\n? padding: 3px;\n? text-align: center;\n? box-shadow: inset 2px 2px 5px rgba(0,0,0,0.5), inset -2px -2px 5px rgba(255,255,255,0.5);\n}';
drawOutput();
});
htmlInput.addEventListener("input", drawOutput);
cssInput.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);
類(lèi)選擇器
類(lèi)選擇器由一個(gè)點(diǎn)"。"組成，后面是一個(gè)類(lèi)名。 類(lèi)名稱(chēng)是在HTML 類(lèi) 屬性中沒(méi)有空格的任何值。 這是由你選擇一個(gè)類(lèi)的名稱(chēng)。 還值得了解的是，文檔中的多個(gè)元素可以具有相同的類(lèi)值，并且單個(gè)元素可以具有由空格分隔的多個(gè)類(lèi)名。 這里有一個(gè)簡(jiǎn)單的例子:
這里是一些HTML:
<ul> <li class="first done">Create an HTML document</li> <li class="second done">Create a CSS style sheet</li> <li class="third">Link them all together</li> </ul>
一個(gè)簡(jiǎn)單的樣式表:
/* The element with the class "first" is bolded */
.first {
font-weight: bold;
}
/* All the elements with the class "done" are strike through */
.done {
text-decoration: line-through;
}
我們得到這個(gè)結(jié)果:
主動(dòng)學(xué)習(xí):處理多個(gè)類(lèi)
對(duì)于這種主動(dòng)學(xué)習(xí)，我們希望您嘗試更改段落元素的類(lèi)屬性，以便可以應(yīng)用多個(gè)單獨(dú)的效果。 嘗試應(yīng)用 base-box 類(lèi)和一個(gè)角色類(lèi)(編輯器注釋或警告)，以及可選的 important 如果你想給盒子強(qiáng)烈的重視。 想想這種規(guī)則集如何允許你建立一個(gè)模塊化的系統(tǒng)的樣式。
如果發(fā)生錯(cuò)誤，您可以隨時(shí)使用重置按鈕重置。 如果您遇到問(wèn)題，請(qǐng)按顯示解決方案按鈕查看一個(gè)潛在的答案。
Playable code 2
<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 class="">My first paragraph.</p>
<p class="">My second paragraph.</p>
<p class="">My third paragraph</p></textarea>
<h2>CSS Input</h2>
<textarea id="code" class="css-input" style="width: 90%;height: 12em;padding: 10px;border: 1px solid #0095dd;">.base-box {
background-image: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.3));
?padding: 3px 3px 3px 7px;
}
.important {
?font-weight: bold;
}
.editor-note {
? background-color: #9999ff;
? border-left: 6px solid #333399;
}
.warning {
? background-color: #ff9999;
border-left: 6px solid #993333;
}</textarea>
<h2>Output</h2>
<div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></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 = '<p class="base-box warning important">My first paragraph.</p>\n\n<p class="">My second paragraph.</p>\n\n<p class="">My third paragraph</p>';
cssInput.value = cssCode;
drawOutput();
});
htmlInput.addEventListener("input", drawOutput);
cssInput.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);
ID選擇器
ID選擇器由一個(gè)哈希/井號(hào)符號(hào)(#)組成，后跟給定元素的ID名稱(chēng)。 任何元素都可以具有使用 id 屬性設(shè)置的唯一ID名稱(chēng)。 它取決于您為ID選擇的名稱(chēng)。 這是選擇單個(gè)元素的最有效的方法。
重要:文檔中的ID名稱(chēng)必須是唯一的。 關(guān)于重復(fù)ID的行為是不可預(yù)測(cè)的，例如在一些瀏覽器中，只有第一個(gè)實(shí)例被計(jì)數(shù)，其余的被忽略。
讓我們看一個(gè)快速示例 - 這里是一些HTML:
<p id="polite"> — "Good morning."</p> <p id="rude"> — "Go away!"</p>
一個(gè)簡(jiǎn)單的樣式表:
#polite {
font-family: cursive;
}
#rude {
font-family: monospace;
text-transform: uppercase;
}
我們得到這個(gè)輸出:
主動(dòng)學(xué)習(xí):使用ID分配獲勝者的顏色
對(duì)于這種積極的學(xué)習(xí)，我們希望你給競(jìng)爭(zhēng)對(duì)手的贏家，第二和第三名適當(dāng)?shù)慕?，銀和銅色的顏色，通過(guò)CSS規(guī)則2-4適當(dāng)?shù)倪x擇器，根據(jù)他們的ID選擇相關(guān)的元素。
如果發(fā)生錯(cuò)誤，您可以隨時(shí)使用重置按鈕重置。 如果您遇到問(wèn)題，請(qǐng)按顯示解決方案按鈕查看一個(gè)潛在的答案。
Playable code 3
<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 id="first"><strong>Winner</strong>: Velma Victory</p>
<p id="second"><strong>2nd</strong>: Colin Contender</p>
<p id="third"><strong>3rd</strong>: Phoebe Player</p></textarea>
<h2>CSS Input</h2>
<textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">p {
? text-transform: uppercase;
? padding: 5px;
}
{
background-color: goldenrod;
}
{
background-color: silver;
}
{
background-color: #CD7F32;
}</textarea>
<h2>Output</h2>
<div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></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 {\n text-transform: uppercase;\n padding: 5px;\n}\n\n#first {\n background-color: goldenrod;\n}\n\n#second {\n background-color: silver;\n}\n\n#third {\n background-color: #CD7F32;\n}';
drawOutput();
});
htmlInput.addEventListener("input", drawOutput);
cssInput.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);
通用選擇器
通用選擇器( * )是最終的小丑。 它允許選擇頁(yè)面中的所有元素。 由于向頁(yè)面上的每個(gè)元素應(yīng)用樣式很少有用，因此它通常與其他選擇器結(jié)合使用(請(qǐng)參見(jiàn)下面的組合器)。
重要:使用通用選擇器時(shí)要小心。 由于它適用于所有元素，在大型網(wǎng)頁(yè)中使用它可能會(huì)對(duì)性能產(chǎn)生明顯的影響:網(wǎng)頁(yè)可能顯示得比預(yù)期慢。 沒(méi)有太多實(shí)例要使用此選擇器。
現(xiàn)在舉個(gè)例子: 首先一些HTML:
<div> <p>I think the containing box just needed a <strong>border</strong> or <em>something</em>, but this is getting <strong>out of hand</strong>!</p> </div>
和一個(gè)簡(jiǎn)單的樣式表:
* {
padding: 5px;
border: 1px solid black;
background: rgba(255,0,0,0.25)
}
在一起，這些給出以下結(jié)果:
在下一篇文章中
做到了達(dá)到我們的第一選擇器教程的結(jié)束！ 我希望你發(fā)現(xiàn)你的第一個(gè)播放選擇器有趣 - 現(xiàn)在我們看看我們最常用的簡(jiǎn)單的核心選擇器，讓我們開(kāi)始看一些更高級(jí)的功能，從 / Attribute_selectors">屬性選擇器。
更多建議：