CSS3中的属性选择器

最新推荐文章于 2022-05-16 20:57:03 发布

SSLUKA

最新推荐文章于 2022-05-16 20:57:03 发布

阅读量257

点赞数

文章标签： css

本文链接：https://blog.csdn.net/SSLUKA/article/details/106460976

版权

相较于CSS，CSS3中增加了三个属性选择器：[att*=val],[att^=val],[att$=val].

[att * =val]属性选择器
基本概念：如果元素用att表示的属性的值中包含用val指定的字符，那么该元素使用这个样式。

<head>
	<meta charset="UTF-8">
	<style>
        [id*=section]{
            background: blue;
        }
	</style>
<head>
<body>
<div id="section1">section1</div>
</body>

[att^=val]属性选择器
基本概念：如果用att表示的属性的属性值的开头字符为val指定的字符的话，那么该元素使用这个值。

<head>
	<meta charset="UTF-8">
	<style>
        [id^=t]{
            background: blue;
        }
	</style>
<head>
<body>
<div id="ttsection">ttsection</div>
</body>

[att$=val]属性选择器
基本概念：如果元素用att表示的属性的属性值的结尾字符为用val指定的字符，那么该元素使用这个样式。
PS.如果指定的字符为数字，那么需要在之前加一个" \ "以及离数字最近的一个字符（除了连接符为“_”时）

<head>
	<meta charset="UTF-8">
	<style>
        [id$=\n1]{
            background: blue;
        }
        [id$=\.2]{
            background: red;
        }
        [id$=_2]{
        /*也可以是[id$=\_2]*/
            background: pink;
        }
	</style>
<head>
<body>
<div id="section1">section1</div>
<div id="section1-1">section1</div>
<div id="section1-1-2">section1</div>
<div id="section1.2">section1</div>
<div id="section1_2">section1</div>
</body>

SSLUKA

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3中的属性选择器

相较于CSS，CSS3中增加了三个属性选择器：[att*=val],[att^=val],[att$=val].[att^=val]属性选择器基本概念：如果元素用att’表示的属性的值中包含用val指定的字符，那么该元素使用这个样式。<head> <meta charset="UTF-8"> <style> [id*=section]{ background: blue; } </style>
复制链接

扫一扫