样式表的种类与选择器使用

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基础选择器和复杂选择器边框阴影)

样式表与选择器

微信小程序10(wxss-样式导入内联样式选择器全局样式与局部样式)

样式表的类别选择器和优先级

刚刚接触样式表的时候应该注意的问题