CSS属性选择器

最新推荐文章于 2024-05-19 00:30:00 发布

_wjl_

最新推荐文章于 2024-05-19 00:30:00 发布

阅读量1.2k

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/abc_123_linbin/article/details/90349959

版权

web前端专栏收录该内容

50 篇文章 2 订阅

订阅专栏

属性选择器

选取标签带有某些特殊属性的选择器

**选择器	**示例	**含义
E[attr]****		存在attr属性即可
E[attr=val]****		属性值完全等于val
*E[attr=val]******		属性值里包含val字符并且在“任意”位置
E[attr^=val]****		属性值里包含val字符并且在“开始”位置
E[attr$=val]****		属性值里包含val字符并且在“结束”位置

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>黑马前端--属性选择器</title>
	<style>
         a[title] {       /* 属性选择器用[]表示 要挨着 */
         	color: red;
         }
         input[type=text]
         {
         	color: red;
         }
	</style>
</head>
<body>
	<a href="#" title="baidu">百度</a>
	<a href="#" title="新浪">新浪</a>
	<a href="#">搜狐</a>
	<a href="#">网易</a>
	<a href="#">土豆</a>
    <hr />  <br />
	<input type="text" value="文本框">
	<input type="text" value="文本框">
	<input type="submit" value="提交">
	<input type="submit">
	<input type="submit">
	<input type="text">
	<input type="reset">
	<input type="reset">
	<input type="reset">
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>黑马前端--属性选择器</title>
	<style>

	    /* ^= 表示font开头 */
        div[class^=font] {
        	color: green;
        }

        /* $=表示结束位置 */
        div[class$=footer] {
        	color: blue;
        }
       /*  *=表示在任意位置都可以 */
        div[class*=tao]{
        	color: red;
        }


	</style>
</head>
<body>
	<div class="font12">属性选择器</div>
	<div class="font12">属性选择器</div>
	<div class="font24">属性选择器</div>
	<div class="font24">属性选择器</div>
	<div class="24font">属性选择器123</div>
	<div class="sub-footer">属性选择器-footer</div>
	<div class="jd-footer">属性选择器-footer</div>
	<div class="news-tao-nav">属性选择器-tao</div>
	<div class="news-tao-header">属性选择器-tao</div>
	<div class="tao-header">属性选择器-tao</div>
</body>
</html>

在这里插入图片描述

_wjl_

关注

0
点赞
踩
0

收藏

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

属性选择器选取标签带有某些特殊属性的选择器**选择器**示例**含义E[attr]****存在attr属性即可E[attr=val]****属性值完全等于valE[attr*=val]****属性值里包含val字符并且在“任意”位置E[attr^=val]****属性值里包含val字符并且在“开始”位置E[attr$=val]***...
复制链接

扫一扫

专栏目录