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

最新推荐文章于 2024-08-17 23:58:49 发布

柯南道尔2606

最新推荐文章于 2024-08-17 23:58:49 发布

阅读量452

点赞数

分类专栏： CSS 文章标签： css

CSS 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

原始网址：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>

提示：请访问 CSS Forms Tutorial 获得更多有关如何使用 CSS 式样化表单的示例。

柯南道尔2606

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 基础（024_属性选择器）

原始网址：http://www.w3schools.com/css/css_attribute_selectors.asp翻译：CSS 属性选择器（CSS Attribute Selectors）样式化带有特定属性的 HTML 元素样式化具有特定属性或属性值的 HTML 元素是可能的。CSS [attribute] 选择器[attribute] 选择器选择带有特定属
复制链接

扫一扫

专栏目录