Css 简明教程
CSS - Atrribute Selector Property
Description
使用 CSS 属性选择器，你可以根据一个或多个属性的存在或值来选择 HTML 元素。它们是针对 HTML 标记中特定元素的强大方式。属性选择器用方括号 [] 括起来，并且可以采用各种形式。
以下部分讨论了一些使用属性选择器的常见方法：
CSS [attribute] Selector
此选择器会选择有指定属性的元素，而无论其值为何。
Example
以下是选择所有带有“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"] Selector
此选择器选择具有特定值特定属性的元素。
Example
此选择器选择所有带有‘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"] Selector
此选择器选择具有特定属性且其值以特定字符串开头的元素。
Example
此选择器选择所有以“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.tutorialspoint.com">HTTPS Link</a></p>
<p><a href="http://www.tutorialspoint.com">HTTP Link</a></p>
</body>
</html>CSS [attribute|="value"] Selector
此选择器选择具有特定属性且其值以指定子字符串开头，后跟连字符 (-)。此选择器通常用于选择具有语言特定属性的元素，例如 lang 属性，它经常使用连字符来表示语言子代码。
Example
此选择器选择所有以“en”开头的“lang”属性，后跟连字符：
<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"] Selector
此选择器用于选择具有特定属性且其值包含指定单词的元素。该单词应是一个独立的单词，周围有空格，或者位于属性值的开头或结尾。
Example
此选择器选择所有带有 “beautifyme”单词的 “class”属性的元素
<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>Attribute Selectors For href Links
您可以根据它们的 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>Attribute Selectors For Inputs
属性选择器可用于根据特定条件选择 input 元素，例如其类型、名称、值或其他属性。
示例如下：
<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>Attribute Selectors For Title
要根据 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>Attribute Selectors For Language
您可以使用 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 Multiple Attribute Selectors
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 Attribute Selectors With Sibling Combinator
可以共同使用 CSS 属性选择器和同级组合子，基于属性及其与其他元素的关系来选择特定元素。
-
General sibling combinator (~) − 此组合子选择所有紧跟指定元素后面的同级元素，但直接与其相邻。语法 selector1 ~ selector2 { /* CSS 样式 */}
-
Adjacent sibling combinator (+) − 此组合子选择紧跟指定元素后面的元素。语法 selector1 + selector2 { /* CSS 样式 */}
以下示例表明，相邻同级组合子 (+) 会选择紧跟标题之后的段落，而一般同级组合子 (~) 会选择标题之后的 <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>