属性选择器

最新推荐文章于 2020-12-20 12:57:47 发布

时松

最新推荐文章于 2020-12-20 12:57:47 发布

阅读量411

点赞数

CC 4.0 BY-SA版权

分类专栏：基础文章标签：属性选择器

本文链接：https://blog.youkuaiyun.com/ice_yr/article/details/96745228

基础专栏收录该内容

79 篇文章

订阅专栏

本文详细介绍了CSS中的属性选择器及其使用方法。包括如何通过属性名称、属性值以及属性值的部分匹配来选择元素，并提供了具体的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

选取标签带有某些特殊属性的选择器，我们成为属性选择器
属性选择器用中括号来表示

a[title]{  /*属性选择器用中括号来表示*/
		color: red
	}
input[type=text]{
		color: skyblue;
	}

		<a href="#" title="我是百度">百度</a>
		<a href="#" title="我是搜狐">搜狐</a>
		<a href="#">新浪</a>
		<a href="#">网易</a>
		<input type="text" value="文本框">
		<input type="text" value="文本框">
		<input type="text" value="文本框">
		<input type="submit">
		<input type="reset">

注意：input[type=text]{
		color: skyblue;
	}
等号后要完全等于	<input type="text" value="文本框">  中引号内的text

例子：

	div[class^=font]{         /*class^=font 表示 font 开头的位置即可*/
		color: red;
	}
	div[class$=footer]{         /*class$=footer 表示 footer 结束的位置即可*/
		color: skyblue;
	}
	div[class*=jd]{            /* class*=jd   *=  表示jd 在任意位置都可*/     
		color: green;
	}

		<div class="font12">属性选择器</div>
		<div class="font12">属性选择器</div>
		<div class="font24">属性选择器</div>
		<div class="font24">属性选择器</div>
		<div class="font24">属性选择器</div>
		<div class="sub-footer">属性选择器</div>
		<div class="jd-footer">属性选择器</div>
		<div class="news-jd-nav">属性选择器</div>
		<div class="news-jd-hesder">属性选择器</div>
		<div class="jd-header">属性选择器</div>