属性选择器早在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/post/7730.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知