css3属性选择器
属性选择器早在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,我们将及时处理。
微信扫码关注
更新实时通知