CSS 基础（024_属性选择器）

本文详细介绍了CSS中各种属性选择器的使用方法，包括基本的选择带有特定属性的元素到复杂的选择属性值包含特定单词或以特定值开头的元素。此外还展示了如何利用这些选择器来美化表单。

原始网址：http://www.w3schools.com/css/css_attribute_selectors.asp

翻译：

CSS 属性选择器（CSS Attribute Selectors）

样式化带有特定属性的 HTML 元素

样式化具有特定属性或属性值的 HTML 元素是可能的。

CSS [attribute] 选择器

[attribute] 选择器选择带有特定属性的元素。
以下示例选择所有带有 target 属性的 <a> 元素：

a[target] {
    background-color: yellow;
}

CSS [attribute] 选择器

<!DOCTYPE html>
<html>
<head>
<style>
a[target] {
    background-color: yellow;
}
</style>
</head>
<body>
    <p>The links with a target attribute gets a yellow background:</p>
    <a href="http://www.w3schools.com">w3schools.com</a>
    <a href="http://www.disney.com" target="_blank">disney.com</a>
    <a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
    <p><b>Note:</b> For [<i>attribute</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p>
</body>
</html>

CSS [attribute="value"] 选择器

[attribute="value"] 选择器用以选择带有特定属性值的元素。
以下示例选择所有带有 target="_blank" 属性的 <a> 元素：

a[target="_blank"] {
    background-color: yellow;
}

CSS 属性值选择器

<!DOCTYPE html>
<html>
<head>
<style>
a[target=_blank] {
    background-color: yellow;
}
</style>
</head>
<body>
    <p>The link with target="_blank" gets a yellow background:</p>
    <a href="http://www.w3schools.com">w3schools.com</a>
    <a href="http://www.disney.com" target="_blank">disney.com</a>
    <a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
    <p><b>Note:</b> For [<i>attribute</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p>
</body>
</html>

CSS [attribute~="value"] 选择器

[attribute~="value"] 选择器用以选择属性值包含特定单词的元素。
以下示例选择 title 属性值包含 "flower" 单词的所有元素：

[title~="flower"] {
    border: 5px solid yellow;
}

<!DOCTYPE html>
<html>
<head>
<style>
[title~=flower] {
    border: 5px solid yellow;
}
</style>
</head>
<body>
    <p>All images with the title attribute containing the word "flower" get a yellow border.</p>
    <img src="http://www.w3schools.com/css/klematis.jpg" title="klematis flower" width="150" height="113">
    <img src="http://www.w3schools.com/css/img_flwr.gif" title="flower" width="224" height="162">
    <img src="http://www.w3schools.com/css/img_tree.gif" title="tree" width="200" height="358">
    <p><b>Note:</b> For [<i>attribute</i>~=<i>value</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p>
</body>
</html>

以上示例可匹配 title 值为 "flower"、"summer flower"、"flower new" 的元素，但是，不能匹配 title 值为 my-flower 或 "flowers" 的元素。

CSS [attribute|="value"] 选择器

[attribute|=”value”] 选择器用以选择以特定值打头的特定属性的元素。
以下示例选择 class 属性值以 "top" 打头的所有元素：
注意：值必须是单词，如 class="top"，或者，单词之后紧跟连字符，如 class="top-text" ！

[class|="top"] {
    background: yellow;
}

CSS 属性选择器

<!DOCTYPE html>
<html>
<head>
<style>
[class|=top] {
    background: yellow;
}
</style>
</head>
<body>
    <h1 class="top-header">Welcome</h1>
    <p class="top-text">Hello world!</p>
    <p class="topcontent">Are you learning CSS?</p>
    <p><b>Note:</b> For [<i>attribute</i>|=<i>value</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p>
</body>
</html>

CSS [attribute^="value"] 选择器

[attribute^="value"] 选择器用以选择属性值以特定字符串打头的元素。
以下示例选择 class 属性值以 "top" 打头的所有元素：
注意：值不必是单词！

[class^="top"] {
    background: yellow;
}

CSS 属性选择器

<!DOCTYPE html>
<html>
<head>
<style>
[class^="top"] {
    background: yellow;
}
</style>
</head>
<body>
    <h1 class="top-header">Welcome</h1>
    <p class="top-text">Hello world!</p>
    <p class="topcontent">Are you learning CSS?</p>
    <p><b>Note:</b> For [<i>attribute</i>^=<i>value</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p>
</body>
</html>

CSS [attribute$="value"] 选择器

[attribute$="value"] 选择器用以选择属性值以特定值结尾的元素。
以下示例选择 class 属性值以 "test" 结尾的所有元素：
注意：值不必是单词！

[class$="test"] {
    background: yellow;
}

CSS 属性选择器

<!DOCTYPE html>
<html>
<head>
<style>
[class$="test"] {
    background: yellow;
}
</style>
</head>
<body>
    <div class="first_test">The first div element.</div>
    <div class="second">The second div element.</div>
    <div class="my-test">The third div element.</div>
    <p class="mytest">This is some text in a paragraph.</p>
</body>
</html>

CSS [attribute*="value"] 选择器

[attribute*="value"] 选择器用以选择属性值包含特定值的元素。
以下示例选择 class 属性值包含 "te" 的所有元素：
注意：值不必是单词！

[class*="te"] {
    background: yellow;
}

CSS 属性选择器

<!DOCTYPE html>
<html>
<head>
<style>
[class*="te"] {
    background: yellow;
}
</style>
</head>
<body>
    <div class="first_test">The first div element.</div>
    <div class="second">The second div element.</div>
    <div class="my-test">The third div element.</div>
    <p class="mytest">This is some text in a paragraph.</p>
</body>
</html>

样式化表单（Styling Forms）

属性选择器对样式化不含 class 或 ID 的表单很有用：

input[type="text"] {
    width: 150px;
    display: block;
    margin-bottom: 10px;
    background-color: yellow;
}

input[type="button"] {
    width: 120px;
    margin-left: 35px;
    display: block;
}

CSS 属性选择器

<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
    width: 150px;
    display: block;
    margin-bottom: 10px;
    background-color: yellow;
}

input[type=button] {
    width: 120px;
    margin-left: 35px;
    display: block;
}
</style>
</head>
<body>
    <form name="input" action="" method="get">
        Firstname:<input type="text" name="Name" value="Peter" size="20">
        Lastname:<input type="text" name="Name" value="Griffin" size="20">
        <input type="button" value="Example Button">
    </form>
</body>
</html>