CSS 属性选择器


目录

    显示目录


使用特定属性设置 HTML 元素的样式

可以对具有特定属性或属性值的 HTML 元素进行样式设置。


CSS 选择器 [属性]

[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>



CSS 选择器 [属性=“值”]

[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>



CSS 选择器 [属性~="值"]

[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"。



CSS 选择器 [属性|="值"]

[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>



CSS 选择器 [属性^="值"]

[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>



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

[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>



CSS 选择器 [属性*=“值”]

[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 设置表单样式的更多示例。



所有 CSS 属性选择器

[attribute]

示例

[target]

示例描述

选择具有目标属性的所有元素

[attribute=value]

示例

[target="_blank"]

示例描述

选择所有带有 target="_blank" 的元素

[attribute~=value]

示例

[title~="flower"]

示例描述

选择 title 属性包含空格分隔的单词列表的所有元素,其中之一是“flower”

[attribute|=value]

示例

[lang|="en"]

示例描述

选择 lang 属性值以“en”开头的所有元素

[attribute^=value]

示例

a[href^="https"]

示例描述

选择所有 href 属性值以“https”开头的 <a> 元素

[attribute$=value]

示例

a[href$=".pdf"]

示例描述

选择所有 href 属性值以“.pdf”结尾的 <a> 元素

[attribute*=value]

示例

a[href*="w3schools"]

示例描述

选择 href 属性值包含子字符串“w3schools”的所有 <a> 元素