可以对具有特定属性或属性值的 HTML 元素进行样式设置。
[attribute]
选择器用于选择具有指定属性的元素 属性。
以下示例选择所有具有 target 属性的 <a> 元素:
a[target] {
background-color: yellow;
}
自己尝试一下→
<!DOCTYPE html>
<html>
<head>
<style>
a[target] {
background-color: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute] Selector</h2>
<p>The links with a target attribute gets a yellow background:</p>
<a href="https://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>
</body>
</html>
[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>
<h2>CSS [attribute="value"] Selector</h2>
<p>The link with target="_blank" gets a yellow background:</p>
<a href="https://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>
</body>
</html>
[attribute~="value"]
选择器用于选择具有属性的元素 包含指定单词的值。
以下示例选择具有 title 属性的所有元素 包含一个以空格分隔的单词列表,其中之一是“flower”:
[title~="flower"] {
border: 5px solid yellow;
}
自己尝试一下→
<!DOCTYPE html>
<html>
<head>
<style>
[title~="flower"] {
border: 5px solid yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute~="value"] Selector</h2>
<p>All images with the title attribute containing the word "flower" get a yellow border.</p>
<img src="klematis.jpg" title="klematis flower" width="150" height="113">
<img src="img_flwr.gif" title="flower" width="224" height="162">
<img src="img_tree.gif" title="tree" width="200" height="358">
</body>
</html>
上面的示例将匹配 title="flower"、title="summer 的元素 花”和 title="flower new",但不是 title="my-flower" 或 title="flowers"。
[attribute|="value"]
选择器 用于选择具有指定属性的元素,其值可以是 恰好是指定值,或者指定值后跟连字符 (-)。
注意:该值必须是一个完整的单词,可以单独使用,例如 class="top",或后跟连字符 ( - ),如 class="top-text"。
[class|="top"] {
background: yellow;
}
自己尝试一下→
<!DOCTYPE html>
<html>
<head>
<style>
[class|="top"] {
background: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute|="value"] Selector</h2>
<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>
</body>
</html>
[attribute^="value"]
选择器 用于选择具有指定属性的元素,其值以 指定值。
以下示例选择具有以下类属性值的所有元素 以“顶部”开头:
注意:该值不必是整个单词!
[class^="top"] {
background: yellow;
}
自己尝试一下→
<!DOCTYPE html>
<html>
<head>
<style>
[class^="top"] {
background: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute^="value"] Selector</h2>
<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>
</body>
</html>
[attribute$="value"]
选择器用于选择其属性的元素 value 以指定值结尾。
以下示例选择具有以下类属性值的所有元素 以“测试”结尾:
注意:该值不必是整个单词!
[class$="test"] {
background: yellow;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
[class$="test"] {
background: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute$="value"] Selector</h2>
<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>
[attribute*="value"]
选择器用于选择其属性的元素 value 包含指定值。
以下示例选择具有以下类属性值的所有元素 包含“te”:
注意:该值不必是整个单词!
[class*="te"] {
background: yellow;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
[class*="te"] {
background: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute*="value"] Selector</h2>
<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>
属性选择器对于没有类或 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>
<h2>Styling Forms</h2>
<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 表单教程,了解有关如何使用 CSS 设置表单样式的更多示例。
示例
[target]
示例描述
选择具有目标属性的所有元素
示例
[target="_blank"]
示例描述
选择所有带有 target="_blank" 的元素
示例
[title~="flower"]
示例描述
选择 title 属性包含空格分隔的单词列表的所有元素,其中之一是“flower”
示例
[lang|="en"]
示例描述
选择 lang 属性值以“en”开头的所有元素
示例
a[href^="https"]
示例描述
选择所有 href 属性值以“https”开头的 <a> 元素
示例
a[href$=".pdf"]
示例描述
选择所有 href 属性值以“.pdf”结尾的 <a> 元素
示例
a[href*="w3schools"]
示例描述
选择 href 属性值包含子字符串“w3schools”的所有 <a> 元素