Attribute selectors
存在和值属性选择器
这些属性选择器尝试匹配精确的属性值:
-
[attr]: This selector will select all elements with the attributeattr, whatever its value. -
[attr=val]: This selector will select all elements with the attributeattr, but only if its value isval. -
[attr~=val]: This selector will select all elements with the attributeattr, but only if the valuevalis one of a space-separated list of values contained inattr's value, for example a single class in a space-separated list of classes.
让我们看一个以下面的HTML代码片段为例:
Ingredients for my recipe: <i lang="fr-FR">Poulet basquaise</i> <ul> <li data-quantity="1kg" data-vegetable>Tomatoes</li> <li data-quantity="3" data-vegetable>Onions</li> <li data-quantity="3" data-vegetable>Garlic</li> <li data-quantity="700g" data-vegetable="not spicy like chili">Red pepper</li> <li data-quantity="2kg" data-meat>Chicken</li> <li data-quantity="optional 150g" data-meat>Bacon bits</li> <li data-quantity="optional 10ml" data-vegetable="liquid">Olive oil</li> <li data-quantity="25cl" data-vegetable="liquid">White wine</li> </ul>
和一个简单的样式表:
/* All elements with the attribute "data-vegetable"
are given green text */
[data-vegetable] {
color: green
}
/* All elements with the attribute "data-vegetable"
with the exact value "liquid" are given a golden
background color */
[data-vegetable="liquid"] {
background-color: goldenrod;
}
/* All elements with the attribute "data-vegetable",
containing the value "spicy", even among others,
are given a red text color */
[data-vegetable~="spicy"] {
color: red;
}
结果如下:
子串值属性选择器
此类中的属性选择器也称为"RegExp-like选择器"，因为它们提供类似于 "class ="glossaryLink">正则表达式(但要清楚，这些选择器不是真正的正则表达式):
-
[attr|=val]: This selector will select all elements with the attributeattrfor which the value is exactlyvalor starts withval-(careful, the dash here isn't a mistake, this is to handle language codes.) -
[attr^=val]: This selector will select all elements with the attributeattrfor which the value starts withval. -
[attr$=val]: This selector will select all elements with the attributeattrfor which the value ends withval. -
[attr*=val]: This selector will select all elements with the attributeattrfor which the value contains the stringval(unlike[attr~=val], this selector doesn't treat spaces as value separators but as part of the attribute value.)
让我们继续我们前面的例子，并添加以下CSS规则:
Ingredients for my recipe: <i lang="fr-FR">Poulet basquaise</i> <ul> <li data-quantity="1kg" data-vegetable>Tomatoes</li> <li data-quantity="3" data-vegetable>Onions</li> <li data-quantity="3" data-vegetable>Garlic</li> <li data-quantity="700g" data-vegetable="not spicy like chili">Red pepper</li> <li data-quantity="2kg" data-meat>Chicken</li> <li data-quantity="optional 150g" data-meat>Bacon bits</li> <li data-quantity="optional 10ml" data-vegetable="liquid">Olive oil</li> <li data-quantity="25cl" data-vegetable="liquid">White wine</li> </ul>
/* Classic usage for language selection */
[lang|=fr] {
font-weight: bold;
}
/* All elements with the attribute "data-vegetable" containing
the value "not spicy" are turned back to green */
[data-vegetable*="not spicy"] {
color: green;
}
/* All elements with the attribute "data-quantity", for which
the value ends with "kg" */
[data-quantity$="kg"] {
font-weight: bold;
}
/* All elements with the attribute "data-quantity", for which the
value starts with "optional" */
[data-quantity^="optional"] {
opacity: 0.5;
}
/* All elements with the attribute "data-vegetable" are given green text */ [data-vegetable] { color: green } /* All elements with the attribute "data-vegetable" with the exact value "liquid" are given a golden background color */ [data-vegetable="liquid"] { background-color: goldenrod; } /* All elements with the attribute "data-vegetable", containing the value "spicy", even among others, are given a red background color */ [data-vegetable~="spicy"] { color: red; }
有了这些新规则，我们将得到:
主动学习:设计足球比赛结果
在这个主动学习中，我们希望你能够尝试为一些简单的足球结果列表添加属性选择器。 这里有三件事要做:
- The first three rules add a UK, German, and Spanish flag icon respectively to the left hand side of the list items. You need to fill in appropriate attribute selectors so that the teams are given their correct country flags, matched by language.
- Rules 4–6 add a background color to the list items to indicate whether the team has gone up in the league (green,
rgba(0,255,0,0.7)), down (red,rgba(255,0,0,0.5)), or stayed in the same place (blue,rgba(0,0,255,0.5).) Fill in the appropriate attribute selectors to match the correct colors to the correct teams, matched by theinc,sameanddecstrings that appear in thedata-perfattribute values. - Rules 7–8 make teams that are set to be promoted bold, and teams that are in danger of being relegated italic and gray. Fill in appropriate attribute selectors to match these styles to the correct teams, matched by the
proandrelstrings that appear in thedata-perfattribute values.
如果发生错误，您可以随时使用重置按钮重置。 如果您遇到问题，请按显示解决方案按钮查看一个潜在的答案。
Playable code 4
<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;"><ol>
<li lang="en-GB" data-perf="inc-pro">Manchester United</li>
<li lang="es" data-perf="same-pro">Barcelona</li>
<li lang="de" data-perf="dec">Bayern Munich</li>
<li lang="es" data-perf="same">Real Madrid</li>
<li lang="de" data-perf="inc-rel">Borussia Dortmund</li>
<li lang="en-GB" data-perf="dec-rel">Southampton FC</li>
</ol></textarea>
<h2>CSS Input</h2>
<textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">li[] {
background: url("http://mdn.github.io/learning-area/css/introduction-to-css/css-selectors/en-GB.png") 5px center no-repeat;
}
li[] {
background: url("http://mdn.github.io/learning-area/css/introduction-to-css/css-selectors/de.png") 5px center no-repeat;
}
li[] {
background: url("http://mdn.github.io/learning-area/css/introduction-to-css/css-selectors/es.png") 5px center no-repeat;
}
li[] {
background-color: rgba(0,255,0,0.7);
}
li[] {
background-color: rgba(0,0,255,0.5);
}
li[] {
background-color: rgba(255,0,0,0.7);
}
li[] {
font-weight: bold;
}
li[] {
font-style: italic;
color: #666;
}
ol {
padding: 0;
}
li {
padding: 3px 3px 3px 34px;
margin-bottom: 5px;
list-style-position: inside;
}</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 = 'li[lang="en-GB"] {\n background: url("http://mdn.github.io/learning-area/css/introduction-to-css/css-selectors/en-GB.png") 5px center no-repeat;\n}\n\nli[lang="de"] {\n background: url("http://mdn.github.io/learning-area/css/introduction-to-css/css-selectors/de.png") 5px center no-repeat;\n}\n\nli[lang="es"] {\n background: url("http://mdn.github.io/learning-area/css/introduction-to-css/css-selectors/es.png") 5px center no-repeat;\n}\n\nli[data-perf*="inc"] {\n background-color: rgba(0,255,0,0.7);\n}\n\nli[data-perf*="same"] {\n background-color: rgba(0,0,255,0.5);\n}\n\nli[data-perf*="dec"] {\n background-color: rgba(255,0,0,0.7);\n}\n\nli[data-perf*="pro"] {\n font-weight: bold;\n}\n\nli[data-perf*="rel"] {\n font-style: italic;\n color: #666;\n}\n\nol {\n padding: 0;\n}\n\nli {\n padding: 3px 3px 3px 34px;\n margin-bottom: 5px;\n list-style-position: inside;\n}';
drawOutput();
});
htmlInput.addEventListener("input", drawOutput);
cssInput.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);
接下来的是
接下来，我们将移动一些东西，看看伪类和伪元素。