1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

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/post/7730.html

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

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: