CSS的class选择器怎么使用
本篇内容主要讲解“CSS的class选择器怎么使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS的class选择器怎么使用”吧!
css 中 class 选择器的基本用法:为同一个类型的标签设置属性。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"><html><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metahttp-equiv="Content-Language"content="zh-cn"/><title>class选择器的使用</title><!--在CSS中,类选择器以一个点号显示。一个类可以被使用多次。--><!--语法:A.BC,如table.blueStyletdblueStyle:class名;table:blueStyle只能作为table的属性;td:table之下的td标签的内容将应用blueStyle指定的属性--><head><styletype="text/css">.redStyle{color:red}.greenStyleForSpanspan{color:green}table.blueStyletd{background-color:#99f}</style></head><bodybgcolor="#eee"><!--所有拥有redStyle类的html元素都将显示为红色--><h4>(一)redStyle类被定义在所有的html标签之上</h4><p>我不拥有redStyle类</p><pclass="redStyle">我是一个p,拥有redStyle类,所以我是红色的</p><h5class="redStyle">我是一个h5,拥有redStyle类,所以我是红色的</h5><hr/><!--和id一样,class也可被用作派生选择器:--><h4>(二)greenStyleForSpan类被定义在所有的html标签之上并且只对下属span有效</h4><divclass="greenStyleForSpan"><p>我是一个p,我所属的div具有greenStyleForSpan类。</p></div><divclass="greenStyleForSpan"><span>我是一个span,我所属的div具有greenStyleForSpan类。</p></div><spanclass="greenStyleForSpan">我是一个span,我自己具有greenStyleForSpan类。</p><hr/><h4>(三)blueStyle类被定义为table的属性,并且只有table下属的td将应用这个属性。</h4><h5>(1)blueStyle类被使用在table上级的div中了,因此table之下的td没有应用blueStyle属性</h5><divclass="blueStyle"><tablecellpadding="10px"border="1"><tr><th>省份</th><th>面积</th><tr><tr><td>河南省</th><td>16.8</th><tr><tr><td>湖北省</th><td>18.1</th><tr></table><div><h5>(2)blueStyle类被使用在table中了,因此table之下的td应用了blueStyle属性,而table之下的p和th则没有应用这个属性。</h5><tableclass="blueStyle"cellpadding="10px"border="1"><p>我是table中的一个p</p><tr><th>省份</th><th>面积</th><tr><tr><td>河南省</th><td>16.8</th><tr><tr><td>湖北省</th><td>18.1</th><tr></table></body></html>
到此,相信大家对“CSS的class选择器怎么使用”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。