Selectors 选择符 | CSS Version 版本 | Description 简介 |
---|---|---|
E[att] | CSS2 | 选择具有att属性的E元素。 |
E[att="val"] | CSS2 | 选择具有att属性且属性值等于val的E元素。 |
E[att~="val"] | CSS2 | 选择具有att属性且属性值为一用空格分隔的字词列表,其中一个等于val的E元素。 |
E[att^="val"] | CSS3 | 选择具有att属性且属性值为以val开头的字符串的E元素。 |
E[att$="val"] | CSS3 | 选择具有att属性且属性值为以val结尾的字符串的E元素。 |
E[att*="val"] | CSS3 | 选择具有att属性且属性值为包含val的字符串的E元素。 |
E[att|="val"] | CSS2 | 选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。 |
E[att]:选择具有att属性的E元素。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS 属性选择符 E[att]选择器-CSS教程</title>
<style>
a[class]{color:#f00;}
</style>
</head>
<body>
<ul>
<li><a href="?" class="external">外部链接</a></li>
<li><a href="?">内部链接</a></li>
<li><a href="?" class="external">外部链接</a></li>
<li><a href="?">内部链接</a></li>
</ul>
</body>
</html>
E[att="val"]:选择具有att属性且属性值等于val的E元素。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS 属性选择符 E[att="val"]选择器-CSS教程</title>
<style>
a[class="external"]{color:#f00;}
</style>
</head>
<body>
<ul>
<li><a href="?" class="external">外部链接</a></li>
<li><a href="?">内部链接</a></li>
<li><a href="?" class="external">外部链接</a></li>
<li><a href="?">内部链接</a></li>
</ul>
</body>
</html>
E[att~="val"]:选择具有att属性且属性值为一用空格分隔的字词列表,其中一个等于val的E元素(包含只有一个值且该值等于val的情况)。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS 属性选择符 E[att~="val"]选择器-CSS教程</title>
<style>
a[class~="external"]{color:#f00;}
</style>
</head>
<body>
<ul>
<li><a href="?" class="external txt">外部链接</a></li>
<li><a href="?" class="txt">内部链接</a></li>
<li><a href="?" class="external txt">外部链接</a></li>
<li><a href="?" class="txt">内部链接</a></li>
</ul>
</body>
</html>
E[att^="val"]:选择具有att属性且属性值为以val开头的字符串的E元素。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS 属性选择符 E[att^="val"]选择器-CSS教程</title>
<style>
li[class^="a"]{color:#f00;}
</style>
</head>
<body>
<ul>
<li class="abc">列表项目</li>
<li class="acb">列表项目</li>
<li class="bac">列表项目</li>
<li class="bca">列表项目</li>
<li class="cab">列表项目</li>
<li class="cba">列表项目</li>
</ul>
</body>
</html>
E[att$="val"]:选择具有att属性且属性值为以val结尾的字符串的E元素。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS 属性选择符 E[att$="val"]选择器-CSS教程</title>
<style>
li[class$="a"]{color:#f00;}
</style>
</head>
<body>
<ul>
<li class="abc">列表项目</li>
<li class="acb">列表项目</li>
<li class="bac">列表项目</li>
<li class="bca">列表项目</li>
<li class="cab">列表项目</li>
<li class="cba">列表项目</li>
</ul>
</body>
</html>
E[att*="val"]:选择具有att属性且属性值为包含val的字符串的E元素。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS 属性选择符 E[att*="val"]选择器-CSS教程</title>
<style>
li[class*="a"]{color:#f00;}
</style>
</head>
<body>
<ul>
<li class="abc">列表项目</li>
<li class="acb">列表项目</li>
<li class="bac">列表项目</li>
<li class="bca">列表项目</li>
<li class="cab">列表项目</li>
<li class="cba">列表项目</li>
</ul>
</body>
</html>
E[att|="val"]:选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS 属性选择符 E[att|="val"]选择器-CSS教程</title>
<style>
li[class|="test3"]{color:#f00;}
</style>
</head>
<body>
<ul>
<li class="test1-abc">列表项目</li>
<li class="test2-abc">列表项目</li>
<li class="test3-abc">列表项目</li>
<li class="test4-abc">列表项目</li>
<li class="test5-abc">列表项目</li>
<li class="test6-abc">列表项目</li>
</ul>
</body>
</html>