4 屬性選擇器
屬性選擇器是通過元素的屬性及屬性值來選擇元素的。下面介紹屬性選擇器的用法。
- 第一種用法
作用：選擇含有指定屬性的元素。
語法：[屬性名]{}
示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>屬性選擇器</title>
<style>
input[type]{
border: 1px solid red;
}
</style>
</head>
<body>
用戶名：<input type="username">
密 碼：<input type="password">
<br>
數(shù)據(jù)量：<input id="count">
</body>
</html>
運行結(jié)果：
- 第二種用法
作用：選擇含有指定屬性及指定屬性值的元素。
語法：[屬性名=屬性值]{}
示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>屬性選擇器</title>
<style>
input[type="username"]{
border: 1px solid blue;
}
input[type="password"]{
border: 1px solid red;
}
</style>
</head>
<body>
用戶名：<input type="username">
密 碼：<input type="password">
<br>
數(shù)據(jù)量：<input type="count">
</body>
</html>
運行結(jié)果：
- 第三種用法
作用：選擇含有指定屬性及指定屬性之開頭的元素。
語法：[屬性名^=屬性值]{}
示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>屬性選擇器</title>
<style>
/*
第一種方法：選擇含有指定屬性的元素。
語法：[屬性名]{}
*/
input[type="username"]{
border: 1px solid blue;
}
/*
第二種用法：選擇含有指定屬性及指定屬性值的元素。
語法：[屬性名=屬性值]{}
*/
input[type="password"]{
border: 1px solid red;
}
/*
第三種用法：選擇含有指定屬性及指定屬性之開頭的元素。
語法：[屬性名^=屬性值]{}
*/
div[id^="tit"]{
color: red;
}
div[id^="sala"]{
color: blueviolet;
}
</style>
</head>
<body>
用戶名：<input type="username">
密 碼：<input type="password">
<br>
數(shù)據(jù)量：<input type="count">
<div id="title">生而自由, 愛而無畏</div>
<div id="salary">5萬元</div>
<div id="proname">大項目</div>
</body>
</html>
- 第四種用法
作用：選擇含有指定屬性及指定屬性值結(jié)尾的元素。
語法：[屬性名$=屬性值]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>屬性選擇器</title>
<style>
/*
第一種方法：選擇含有指定屬性的元素。
語法：[屬性名]{}
*/
input[type="username"]{
border: 1px solid blue;
}
/*
第二種用法：選擇含有指定屬性及指定屬性值的元素。
語法：[屬性名=屬性值]{}
*/
input[type="password"]{
border: 1px solid red;
}
/*
第三種用法：選擇含有指定屬性及指定屬性之開頭的元素。
語法：[屬性名^=屬性值]{}
*/
div[id^="tit"]{
color: red;
}
div[id^="sala"]{
color: blueviolet;
}
/*
第四種用法：選擇含有指定屬性及指定屬性之開頭的元素。
語法：[屬性名^=屬性值]{}
*/
</style>
</head>
<body>
用戶名：<input type="username">
密 碼：<input type="password">
<br>
數(shù)據(jù)量：<input type="count">
<div id="title">生而自由, 愛而無畏</div>
<div id="salary">5萬元</div>
<div id="proname">大項目</div>
</body>
</html>
執(zhí)行結(jié)果：
- 第五種用法
作用：選擇含有指定屬性，只要含有某個屬性值的元素。
語法：[屬性值*=屬性名]{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>屬性選擇器</title>
<style>
/*
第一種方法：選擇含有指定屬性的元素。
語法：[屬性名]{}
*/
input[type="username"]{
border: 1px solid blue;
}
/*
第二種用法：選擇含有指定屬性及指定屬性值的元素。
語法：[屬性名=屬性值]{}
*/
input[type="password"]{
border: 1px solid red;
}
/*
第三種用法：選擇含有指定屬性及指定屬性之開頭的元素。
語法：[屬性名^=屬性值]{}
*/
div[id^="tit"]{
color: red;
}
div[id^="sala"]{
color: blueviolet;
}
/*
第四種用法：選擇含有指定屬性及指定屬性之開頭的元素。
語法：[屬性名^=屬性值]{}
*/
div[id$="name"]{
color: orange;
}
/*
第五種用法：選擇含有指定屬性，只要含有某個屬性值的元素。
語法：[屬性值*=屬性名]{}
*/
[title*="login"]{
background-color: #616161;
}
</style>
</head>
<body>
用戶名：<input type="username" title="login">
密 碼：<input type="password" title="login">
<br>
數(shù)據(jù)量：<input type="count">
<div id="title">生而自由, 愛而無畏</div>
<div id="salary">5萬元</div>
<div id="proname" title="project">大項目</div>
</body>
</html>
執(zhí)行結(jié)果：
文章來源：http://www.zghlxwxcb.cn/news/detail-661509.html
總結(jié)如下：文章來源地址http://www.zghlxwxcb.cn/news/detail-661509.html
E[att] 匹配所有具有att屬性的E元素，不考慮它的值。（注意：E在此處可以省略。
比如“[cheacked]”。以下同。） p[title] { color:#f00; }
E[att=val] 匹配所有att屬性等于“val”的E元素 div[class=”error”] { color:#f00; }
E[att~=val] 匹配所有att屬性具有多個空格分隔的值、其中一個值等于“val”的E元素
td[class~=”name”] { color:#f00; }
E[attr^=val] 匹配屬性值以指定值開頭的每個元素
div[class^="test"]{background:#ffff00;}
E[attr$=val] 匹配屬性值以指定值結(jié)尾的每個元素 div[class$="test"]{background:#ffff00;}
E[attr*=val] 匹配屬性值中包含指定值的每個元素 div[class*="test"]{background:#ffff00;}
到了這里，關于4 CSS屬性選擇器的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
