样式表的种类与选择器使用
Posted 小太白
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了样式表的种类与选择器使用相关的知识,希望对你有一定的参考价值。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> /**{color:#CF0}黄色*/ /*#b1{color:#F00}红色*/ /*.c3{color:#F0F}粉色*/ /*span{color:#0F3}绿色*/ div,span{color:#93F}/*紫色*/ div.c3{color:#F00}/*红色*/ div span{color:#0F0}/*绿色*/ div.c2{color:#FF6}/*黄色*/ </style> </head> <body> <div style="color:#0F3;">hello</div> <div class="c3"> 内联 优点控制精确 缺点是代码重置性很差;页面代码乱 优先级最高 </div> <div class="c3"> 内嵌 优点是代码重用性好 缺点是控制没有内联精确 优先级其次 </div> <div class="c3"> 外部嵌入 优点是代码重用性最好 缺点是控制最不精确 优先级和内嵌相同 </div> <div id="b1">精准控制</div> <span>标签选择器</span> <span>标签选择器</span> <span>标签选择器</span> <span>标签选择器</span> <span>标签选择器</span> <div> <span>这是span</span> <span>这是span</span> <span>这是span</span> <span>这是span</span> <span>这是span</span> </div> <div class="c2"> 内联 优点控制精确 缺点是代码重置性很差;页面代码乱 优先级最高 </div> <div class="c2"> 内嵌 优点是代码重用性好 缺点是控制没有内联精确 优先级其次 </div> <div class="c2"> 外部嵌入 优点是代码重用性最好 缺点是控制最不精确 优先级和内嵌相同 </div> <!--*选择<标签选择<class选择器<id选择--> 选择器优先级 </body> </html>
以上是关于样式表的种类与选择器使用的主要内容,如果未能解决你的问题,请参考以下文章
Web开发·期末不挂之第四章·CSS语法基础(CSS选择器&选择器优先级&各类样式表的使用方法)
CSS入门(css简介与样式汇总CSS的使用方式CSS样式表的特征CSS基础选择器和复杂选择器边框阴影)