css3属性选择器

时间：6年前阅读：4830

属性选择器早在CSS2中就被引入了，其主要作用就是对带有指定属性的HTML 元素设置样式。使用CSS3属性选择器，可以只指定元素的某个属性，或者同时指定元素的某个属性和其对应的属性值。

直接上代码解释：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">    
/*选择的是#hd里的儿子辈的p标签*/    
#hd>p{    
	color: red;    
	font-size: 25px;    
}    
/*选择的是紧邻在.one后面的标签*/    
/*#hd #jwerh .one+p{    
	color: blue;    
}*/    
/*选择的是#one后面所有同级的p标签*/    
/*#hd #jwerh .one~p{    
	color: blue;    
}*/    
/*选择的是#hd里有class属性的p标签，无论class属性是多少，只要有class会选中*/    
#hd p[class]{    
	color: orange;    
}    
/*选择的是#hd里id属性值是btt的元素;*/    
#hd p[id=btt]{    
	font-style: italic;    
	color: green;    
}    
/*选择的是#hd里id属性值是g开头的p标签;*/    
#hd p[id^=g]{    
	font-style: italic;    
	color: purple;    
}    
/*选择的是#hd里id属性值是c结尾的p标签;*/    
#hd p[id$=c]{    
	font-style: italic;    
	color: orange;    
}    
/*选择的是#hd里id属性值是有kk的p标签*/    
#hd p[id*=kk]{    
	font-style: italic;    
	color: green;    
}    
</style>
	</head>
	<body>    
<div id="hd">    
	<p>后防重组!孔蒂目标世界级 路易斯刚回来就走人?</p>    
	<p>多特官推调侃皇马:听说最近你们怕穿黄球衣的?</p>    
	<p class="jrtuj">西甲综述-瓦伦2-1获2连胜 塞维利亚遭赛季首败</p>    
	<p>意甲第6轮综述-那不勒斯2-0保持不败 拉齐奥2-0</p>    
	<p>意甲-佩里西奇破门铁卫失绝杀 国米1-1博洛尼亚</p>    
	<p>意甲-托蒂替补点球建功难救主 罗马客场1-3都灵</p>    
<div id="jwerh">    
	<p>高层坐不住了:斯旺西欲换帅吉格斯科尔曼二选一?</p>    
	<p class="one">真是累赘?曼联用生命黑鲁尼 都是缺阵梅西咋没事</p>    
	<p>新高度!图雷经纪人扬言与瓜帅法庭见 你挺哪边?</p>    
<p id="btt">弗格森场边"督战" 爱将相伴+曼联赢球让他乐开花</p>    
<p id="gtt">英超-孙兴慜2球热刺2-1客胜 埃弗顿遭遇赛季首败</p>    
<p>GIF-厄祖60米奔袭+凌空斩 这进球我才看了11遍</p>    
<p id="yyc">GIF-三狮铁卫无脑回传失误 桑切斯小勺子收大礼</p>    
<p>阿森纳VS切尔西首发:桑切斯PK科斯塔 小法出场</p>    
<p id="kka">曼联VS莱斯特城首发:鲁尼坐替补席 马塔辅助伊布</p>    
</div>    
</div>    
</body>
</html>

上面代码效果图片

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

css3属性选择器

网友评论