Simple selectors
由于历史原因，有人把元素选择器也叫做类型选择器，这会和类选择器产生歧义
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规则上更改选择器，以便对示例中的不同元素进行样式化。 你知道如何编写一个选择器来同时将规则集应用到多个元素？
如果发生错误，您可以随时使用重置按钮重置。 如果您遇到问题，请按显示解决方案按钮查看一个潜在的答案。
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 如果你想给盒子强烈的重视。 想想这种规则集如何允许你建立一个模块化的系统的样式。
如果发生错误，您可以随时使用重置按钮重置。 如果您遇到问题，请按显示解决方案按钮查看一个潜在的答案。
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的行为是不可预测的，例如在一些浏览器中，只有第一个实例被计数，其余的被忽略。
让我们看一个快速示例 - 这里是一些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分配获胜者的颜色
对于这种积极的学习，我们希望你给竞争对手的赢家，第二和第三名适当的金，银和铜色的颜色，通过CSS规则2-4适当的选择器，根据他们的ID选择相关的元素。
如果发生错误，您可以随时使用重置按钮重置。 如果您遇到问题，请按显示解决方案按钮查看一个潜在的答案。
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);
通用选择器
通用选择器( * )是最终的小丑。 它允许选择页面中的所有元素。 由于向页面上的每个元素应用样式很少有用，因此它通常与其他选择器结合使用(请参见下面的组合器)。
重要:使用通用选择器时要小心。 由于它适用于所有元素，在大型网页中使用它可能会对性能产生明显的影响:网页可能显示得比预期慢。 没有太多实例要使用此选择器。
现在举个例子: 首先一些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)
}
在一起，这些给出以下结果:
在下一篇文章中
做到了达到我们的第一选择器教程的结束！ 我希望你发现你的第一个播放选择器有趣 - 现在我们看看我们最常用的简单的核心选择器，让我们开始看一些更高级的功能，从 / Attribute_selectors">属性选择器。