免費AI編程助手
Simple selectors
2018-05-15 17:26 更新
由于歷史原因，有人把元素選擇器也叫做類型選擇器，這會和類選擇器產(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. 讓我們一起看看下面這個例子:
這是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;
}
我們得到這個:
主動學習:選擇不同的元素
對于這種主動學習，我們希望您嘗試在單個CSS規(guī)則上更改選擇器，以便對示例中的不同元素進行樣式化。 你知道如何編寫一個選擇器來同時將規(guī)則集應用到多個元素？
如果發(fā)生錯誤，您可以隨時使用重置按鈕重置。 如果您遇到問題，請按顯示解決方案按鈕查看一個潛在的答案。
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);
類選擇器
類選擇器由一個點"。"組成，后面是一個類名。 類名稱是在HTML 類 屬性中沒有空格的任何值。 這是由你選擇一個類的名稱。 還值得了解的是，文檔中的多個元素可以具有相同的類值，并且單個元素可以具有由空格分隔的多個類名。 這里有一個簡單的例子:
這里是一些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>
一個簡單的樣式表:
/* 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;
}
我們得到這個結果:
主動學習:處理多個類
對于這種主動學習，我們希望您嘗試更改段落元素的類屬性，以便可以應用多個單獨的效果。 嘗試應用 base-box 類和一個角色類(編輯器注釋或警告)，以及可選的 important 如果你想給盒子強烈的重視。 想想這種規(guī)則集如何允許你建立一個模塊化的系統(tǒng)的樣式。
如果發(fā)生錯誤，您可以隨時使用重置按鈕重置。 如果您遇到問題，請按顯示解決方案按鈕查看一個潛在的答案。
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選擇器由一個哈希/井號符號(#)組成，后跟給定元素的ID名稱。 任何元素都可以具有使用 id 屬性設置的唯一ID名稱。 它取決于您為ID選擇的名稱。 這是選擇單個元素的最有效的方法。
重要:文檔中的ID名稱必須是唯一的。 關于重復ID的行為是不可預測的，例如在一些瀏覽器中，只有第一個實例被計數(shù)，其余的被忽略。
讓我們看一個快速示例 - 這里是一些HTML:
<p id="polite"> — "Good morning."</p> <p id="rude"> — "Go away!"</p>
一個簡單的樣式表:
#polite {
font-family: cursive;
}
#rude {
font-family: monospace;
text-transform: uppercase;
}
我們得到這個輸出:
主動學習:使用ID分配獲勝者的顏色
對于這種積極的學習，我們希望你給競爭對手的贏家，第二和第三名適當?shù)慕?，銀和銅色的顏色，通過CSS規(guī)則2-4適當?shù)倪x擇器，根據(jù)他們的ID選擇相關的元素。
如果發(fā)生錯誤，您可以隨時使用重置按鈕重置。 如果您遇到問題，請按顯示解決方案按鈕查看一個潛在的答案。
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);
通用選擇器
通用選擇器( * )是最終的小丑。 它允許選擇頁面中的所有元素。 由于向頁面上的每個元素應用樣式很少有用，因此它通常與其他選擇器結合使用(請參見下面的組合器)。
重要:使用通用選擇器時要小心。 由于它適用于所有元素，在大型網(wǎng)頁中使用它可能會對性能產(chǎn)生明顯的影響:網(wǎng)頁可能顯示得比預期慢。 沒有太多實例要使用此選擇器。
現(xiàn)在舉個例子: 首先一些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>
和一個簡單的樣式表:
* {
padding: 5px;
border: 1px solid black;
background: rgba(255,0,0,0.25)
}
在一起，這些給出以下結果:
在下一篇文章中
做到了達到我們的第一選擇器教程的結束！ 我希望你發(fā)現(xiàn)你的第一個播放選擇器有趣 - 現(xiàn)在我們看看我們最常用的簡單的核心選擇器，讓我們開始看一些更高級的功能，從 / Attribute_selectors">屬性選擇器。
以上內容是否對您有幫助：
更多建議：