CSS - Atrribute 选择器属性_CSS 菜鸟教程

描述

CSS 属性选择器允许您根据一个或多个属性的存在或值来选择 HTML 元素。它们是针对 HTML 标记中的特定元素的强大方法。属性选择器用方括号 [] 括起来，可以采用各种形式。

以下各节讨论了使用属性选择器的一些常见方法：

CSS [属性] 选择器

此选择器选择具有指定属性的元素，而不考虑其值。

语法

[attribute]

以下示例选择所有具有“data-toggle”属性的 HTML 元素

<html>
<head>
<style>
	 	[data-toggle] {
	 	 	 background: yellow;
	 	 	 color: red;
	 	}
</style>
</head>
<body>
	 	<h2>CSS [attribute] Selector</h2>
	 	<div data-toggle="yes">The div with data-toggle attribute</div>
	 	<div>The div without data-toggle attribute</div>
	 	<p data-toggle="no">A paragraph with data-toggle attribute</p>
	 	<p>A paragraph without data-toggle attribute</p>

</body>
</html>

CSS [attribute=“value”] 选择器

此选择器选择具有特定属性和特定值的元素。

语法

 [attribute="value"]

此选择器选择具有“data-toggle”属性的所有元素，其值设置为“yes”。

<html>
<head>
<style>
	 	[data-toggle="yes"] {
	 	 	 background: yellow;
	 	 	 color: red;
	 	}
</style>
</head>
<body>
	 	<h2>CSS [attribute="value"] Selector</h2>

	 	<div data-toggle="yes">The div with data-toggle attribute</div>
	 	<div>The div without data-toggle attribute</div>
	 	<p data-toggle="no">A paragraph with data-toggle attribute</p>
	 	<p>A paragraph without data-toggle attribute</p>

</body>
</html>

CSS [attribute*=“value”] 选择器

此选择器选择具有特定属性的元素，其值包含特定子字符串。

语法

 [attribute*="value"]

此选择器选择路径中包含“images”属性的所有具有“src”属性的元素：

<html>
<head>
<style>
	 	[src*="images"] {
	 	 	 border: 2px dashed red;
	 	}
</style>
</head>
<body>
	 	<h2>CSS [attribute*="value"] Selector</h2>

	 	<img alt="Logo" src = "/css/images/logo.png" />

</body>
</html>

CSS [attribute^=“value”] 选择器

此选择器选择具有特定属性的元素，其值以特定字符串开头。

语法

 [attribute^="value"]

此选择器选择具有以“https://”开头的“href”属性的所有元素

<html>
<head>
<style>
	 	[href^="https"] {
	 	 	 background: yellow;
	 	 	 text-decoration:none;
	 	 	 color:red;
	 	}
</style>
</head>
<body>
	 	<h2>CSS [attribute^="value"] Selector</h2>

	 	<p><a href="https://www.qikepu.com">HTTPS Link</a></p>
	 	<p><a href="http://www.qikepu.com">HTTP Link</a></p>

</body>
</html>

CSS [attribute$=“value”] 选择器

此选择器选择具有特定属性的元素，其值以特定字符串结尾。

语法

[attribute$="value"]

此选择器选择具有“src”属性的所有元素，该属性以“.png”结尾

<html>
<head>
<style>
	 	[src$=".png"] {
	 	 	 border: 2px dashed red;
	 	}
</style>
</head>
<body>
	 	<h2>CSS [attribute$="value"] Selector</h2>

	 	<img alt="Logo" src = "/css/images/logo.png" />

</body>
</html>

CSS [attribute|=“value”] 选择器

此选择器选择具有特定属性的元素，其值以指定的子字符串开头，后跟连字符（-）。此选择器通常用于选择具有特定于语言的属性的元素，例如 lang 属性，这些属性通常使用连字符来表示语言子代码。

语法

 [attribute|="value"]

此选择器选择具有“lang”属性的所有元素，该属性以“en”开头，后跟连字符：

<html>
<head>
<style>
	 	[lang|="en"] {
	 	 	 border: 2px dashed red;
	 	}
</style>
</head>
<body>
	 	<h2>CSS [attribute|="value"] Selector</h2>
	 	<div lang="en">Hello World in English!</div>
	 	<div lang="fr">Bonjour tout le monde en français!</div>
	 	<div lang="es">Hola Mundo en español!</div>
</body>
</html>

CSS [attribute~=“value”] 选择器

此选择器用于选择具有特定属性且值包含指定单词的元素。单词应为独立单词，用空格括起来，或者位于属性值的开头或结尾。

语法

 [attribute~="value"]

此选择器选择具有“class”属性的所有元素，该属性包含单词“beautifyme”

<html>
<head>
<style>
	 	[class~="beautifyme"] {
	 	background-color:lightblue;
	 	border:2px solid red;
	 	 	 }
</style>
</head>
<body>
	 	<h2>CSS [attribute|="value"] Selector</h2>
	 	<div class="beautifyme">div with <b>beautifyme</b> class</div>
	 	<div class="beautifyme1">div with <b>beautifyme1</b> class</div>
	 	<div class="beautifyme-2">div with <b>beautifyme-2</b> class</div>
</body>
</html>

href 链接的属性选择器

您可以根据元素的样式设置元素的样式 href 属性是 <a> 元素上使用的常见属性，用于指定链接指向的 URL。

这是一个例子 -

<html>
<head>
<style>
	 	 	 ul {
	 	 	 list-style: none;
	 	}
	 	a[href] {
	 	 	 color: rgb(11, 11, 231);
	 	}
	 	a[href="css_backgrounds.htm"] {
	 	 	 color: rgb(224, 152, 18);
	 	}
	 	a[href~="css_colors.htm"] {
	 	 	 color: rgb(51, 255, 0);
	 	}
	 	a[href|="css_padding.htm"] {
	 	 	 color: rgb(0, 255, 255);
	 	}
	 	a[href^="css_margins.htm"] {
	 	 	 color: rgb(255, 0, 55);
	 	}
	 	a[href$="css_lists.htm"] {
	 	 	 color: rgb(255, 230, 0);
	 	}
	 	a[href*="css_borders.htm"] {
	 	 	 color: rgb(112, 108, 108);
	 	}
</style>
</head>
<body>
	 	<ul>
	 	 	 <li> <a href="css_text.htm">CSS Text</a></li>
	 	 	 <li><a href=".htm">CSS Background</a></li>
	 	 	 <li><a href="css_colors.htm">CSS Color</a></li>
	 	 	 <li><a href="css_padding.htm">CSS Padding</a></li>
	 	 	 <li><a href="css_margins.htm">CSS Margin</a></li>
	 	 	 <li><a href="css_lists.htm">CSS List</a></li>
	 	 	 <li><a href="css_borders.htm">CSS Borders</a></li>
	 	</ul>	
</body>
</html>

输入的属性选择器

属性选择器可用于根据特定条件（例如其类型、名称、值或其他属性）选择输入元素。

这是一个例子 -

<html>
<head>
<style>
	 	input {
	 	 	 display: block;
	 	 	 margin: 10px;
	 	}
	 	input[type] {
	 	 	 border: 1px solid #e0dd29;
	 	}
	 	input[placeholder="Password"] {
	 	 	 border: 1px solid #f00;
	 	}
	 	input[name|="emailid"] {
	 	 	 background-color: rgb(236, 178, 233);
	 	}
	 	input[type~="submit"] {
	 	 	 background-color: rgb(88, 241, 88);
	 	 	 padding: 10px;
	 	}
	 	input[value^="But"] {
	 	 	 background-color: rgb(236, 149, 68);
	 	 	 padding: 10px;
	 	}
	 	input[type$="box"] {
	 	 	 border-radius: 5px;	
	 	 	 height: 50px;
	 	 	 width: 20px;
	 	}
	 	input[type*="adi"] {
	 	 	 height: 50px;
	 	 	 width: 20px;
	 	}
</style>
</head>
<body>
	 	<input type="text" placeholder="Username">
	 	<input type="password" placeholder="Password">
	 	<input type="email" placeholder="Email" name="emailid">
	 	<input type="submit" placeholder="Submit">
	 	<input type="button" value="Button">
	 	<input type="checkbox" placeholder="Checkbox">
	 	<input type="radio" placeholder="Radio">
</body>
</html>

标题的属性选择器

要根据 title 属性设置元素的样式，可以使用 CSS 属性选择器 title 来设置具有包含特定值的 title 属性的元素的样式。

这是一个例子 -

<html>
<head>
<style>
	 	span {
	 	 	 display: block;
	 	 	 margin: 10px;
	 	 	 padding: 5px;
	 	}
	 	span[title] {
	 	 	 border: 2px solid rgb(231, 40, 40);
	 	 	 background-color: rgb(109, 177, 236);
	 	}
	 	span[title="CSS Background"] {
	 	 	 border: 2px solid rgb(231, 40, 40);
	 	 	 background-color: rgb(250, 163, 192);
	 	}
	 	span[title|="CSS Border"] {
	 	 	 border: 2px solid rgb(231, 40, 40);
	 	 	 background-color: rgb(245, 248, 79);
	 	}
	 	span[title^="Mar"] {
	 	 	 border: 2px solid rgb(231, 40, 40);
	 	 	 background-color: rgb(255, 147, 23);
	 	}
	 	span[title$="ght"] {
	 	 	 border: 2px solid rgb(231, 40, 40);
	 	 	 background-color: rgb(102, 201, 240);
	 	}
	 	span[title*="CSS Width"] {
	 	 	 border: 2px solid rgb(231, 40, 40);
	 	 	 background-color: rgb(191, 14, 235);
	 	}
</style>
</head>
<body>
	 	<span title="CSS Text">A text refers to a piece of written or printed information in the form of words or characters.</span>
	 	<span title="CSS Background">You can set backgrounds of various HTML elements.</span>
	 	<span title="CSS Border"> border property is used to create a border around an element.</span>
	 	<span title="Margin">Setting up a margin around an HTML element.</span>
	 	<span title="Height">The height property sets the height of an element's content area.</span>
	 	<span title="CSS Width">The width sets the width of an element's content area.</span>
</body>
</html>

语言的属性选择器

您可以使用 lang 属性根据元素的语言来选择元素。lang 属性指定元素中包含的文本的语言。

这是一个例子 -

<html>
<head>
<style>
	 	div[lang] {
	 	 	 color: red;
	 	}
	 	div[lang="fr"] {
	 	 	 color: blue;
	 	}
	 	div[lang~="es"] {
	 	 	 color: green;
	 	}
	 	div[lang|="de"] {
	 	 	 color: orange;
	 	}
	 	div[lang^="it"] {
	 	 	 color: purple;
	 	}
	 	div[lang$="ja"] {
	 	 	 color: brown;
	 	}
	 	div[lang*="zh"] {
	 	 	 color: teal;
	 	}
</style>
</head>
<body>
	 	<div lang="en">Hello World in English!</div>
	 	<div lang="fr">Bonjour tout le monde en français!</div>
	 	<div lang="es">Hola Mundo en español!</div>
	 	<div lang="ja">こんにちは、日本語で世界！</div>
	 	<div lang="de">Hallo Welt auf Deutsch!</div>
	 	<div lang="it">Ciao Mondo in italiano!</div>
	 	<div lang="zh">你好世界，中文！</div>
</body>
</html>

CSS 多属性选择器

CSS 多属性选择器允许您根据多个属性值选择元素。它用于针对满足多个条件的特定元素。

这是一个例子 -

<html>
<head>
<style>
	 	ul {
	 	 	 list-style: none;
	 	}
	 	a[href] {
	 	 	 color: rgb(231, 11, 194);
	 	}
	 	a[href="css_backgrounds.htm"][href$=".htm"] {
	 	 	 color: rgb(224, 152, 18);
	 	}
	 	a[href="css_colors.htm"] {
	 	 	 color: rgb(51, 255, 0);
	 	}
</style>
</head>
<body>
	 	<ul>
	 	 	 <li><a href="css_text.htm">CSS Text</a></li>
	 	 	 <li><a href="css_backgrounds.htm">CSS Background</a></li>
	 	 	 <li><a href="css_colors.htm">CSS Color</a></li>
	 	</ul>	
</body>
</html>

带有同级组合器的 CSS 属性选择器

CSS 属性选择器和同级组合器可以一起使用，以根据其属性以及它们与其他元素的关系来选择特定元素。

通用同级运算器（~） − 此运算器选择跟随指定元素但不直接相邻的所有同级元素。

语法

selector1 ~ selector2 {
	 	/* CSS styles */
}

相邻同级运算器（+） − 此运算器选择直接位于指定元素之后的元素。

语法

selector1 + selector2 {
	 	/* CSS styles */
}

以下示例演示相邻的同级运载器（+）选择紧跟在标题之后的段落，而常规同级运载器（~）在标题之后选择 <div> −

<html>
<head>
<style>
	 	h2 + p {	
	 	 	 font-weight: bold;
	 	 	 color:blue;
	 	}
	 	h2 ~ div {
	 	 	 color: red;
	 	}
</style>
</head>
<body>
	 	<h2>CSS Background</h2> 	
	 	<p>You can set backgrounds of various HTML elements.</p>
	 	<div>
	 	 	 <p>Contrary to popular belief, Lorem Ipsum is not simply random text.</p>
	 	</div>
	 	<p>There are many variations of passages of Lorem Ipsum available.</p>
</body>
</html>

<< CSS - 加载器 CSS - 运算器 >>