css面试点-属性选择符

最新推荐文章于 2022-12-05 00:30:00 发布

wflynn

最新推荐文章于 2022-12-05 00:30:00 发布

阅读量356

点赞数 1

分类专栏： css 面试知识点

文章来源：原创地址

本文链接：https://blog.csdn.net/weixin_40013817/article/details/102541637

版权

面试知识点同时被 2 个专栏收录

169 篇文章 7 订阅

订阅专栏

css

24 篇文章 0 订阅

订阅专栏

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>

css面试题之css选择符之伪类选择符

css面试题之css选择符之伪对象（伪元素）选择符

css面试题之css选择符之元素选择符与关系选择符

wflynn

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
css面试点-属性选择符

Selectors 选择符 CSS Version 版本 Description 简介 E[att] CSS2 选择具有att属性的E元素。 E[att="val"] CSS2 选择具有att属性且属性值等于val的E元素。 E[att~="val"] CSS2 选择具有att属性且属性值为一用空格分隔...
复制链接

扫一扫