CSS的class选择器怎么使用
短信预约 -IT技能 免费直播动态提醒
本篇内容主要讲解“CSS的class选择器怎么使用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“CSS的class选择器怎么使用”吧!
css 中 class 选择器的基本用法：为同一个类型的标签设置属性。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Content-Language" content="zh-cn" /> <title>class选择器的使用</title><!--在 CSS 中，类选择器以一个点号显示。一个类可以被使用多次。--><!--语法：A.B C，如table.blueStyle td blueStyle：class名； table：blueStyle只能作为table的属性； td：table之下的td标签的内容将应用blueStyle指定的属性--><head><style type="text/css"> .redStyle {color: red} .greenStyleForSpan span {color: green} table.blueStyle td {background-color:#99f}</style> </head> <body bgcolor="#eee"> <!--所有拥有redStyle类的html元素都将显示为红色--> <h4>（一）redStyle类被定义在所有的html标签之上</h4> <p>我不拥有redStyle类</p> <p class="redStyle">我是一个p，拥有redStyle类，所以我是红色的</p> <h5 class="redStyle">我是一个h5，拥有redStyle类，所以我是红色的</h5> <hr/> <!--和 id 一样，class 也可被用作派生选择器：--> <h4>（二）greenStyleForSpan类被定义在所有的html标签之上并且只对下属span有效</h4> <div class="greenStyleForSpan"> <p>我是一个p，我所属的div具有greenStyleForSpan类。</p> </div> <div class="greenStyleForSpan"> <span>我是一个span，我所属的div具有greenStyleForSpan类。</p> </div> <span class="greenStyleForSpan">我是一个span，我自己具有greenStyleForSpan类。</p> <hr/> <h4>（三）blueStyle类被定义为table的属性，并且只有table下属的td将应用这个属性。</h4> <h5>(1)blueStyle类被使用在table上级的div中了，因此table之下的td没有应用blueStyle属性</h5> <div class="blueStyle"> <table cellpadding="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> <table class="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选择器怎么使用”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
