原始网址: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;
}
<!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;
}
<!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;
}
<!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;
}
<!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;
}
<!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;
}
<!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;
}
<!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>
提示:请访问 CSS Forms Tutorial 获得更多有关如何使用 CSS 式样化表单的示例。