有关css的选择器优先级以及父子选择器

2018-06-24 02:20:51来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

  css,又称样式重叠表,如今的网页的样式基本是div+css写出来的,功能十分强大,要想在html文件中引入css文件需要在<head></head>标签内输入一行:<link  rel=" stylesheet "  type=" text/css "  href=" XXX.css "> 

  css的一些基本样式也不一 一做介绍了,这个在手册以及一些学习网站上都会有,大家可以自行查阅;

  css中有四种不同的选择器:1.类选择器(class选择器);2.id选择器;3.html元素选择器;4.通配符选择器;

  1.class选择器的使用:

  . 类选择器名{                                           //类选择器前面的  .   一定要加

    属性名:属性值;

    ...

  }

  2.id选择器的使用:

  # id选择器名{           //在样式表中,id选择器的优先级最高

 

    属性名:属性值;

 

    ...

 

  }

  3.html元素选择器:

  html标签名{            //  eg:   a{    }     img{    }     body{  }   等等

    属性名:属性值;       //当定义一个html元素选择器后,所有该元素的样式都会发生改变

 

    ...

 

  }

  //同一html元素选择器中也可进行分类处理

  html标签名.类名{    // eg:   a . cls1 {                a . cls2 {                   

    属性名:属性值;           属性名:属性值;     属性名:属性值;      

    ...                   ...            ...

  }                    }             }

  /* 应用到页面中   <a  class="cls1">    这个会渲染出a.cls1的样式 

          <a  class="cls2">     这个会渲染出a.cls2的样式 */

  4.通配符选择器:

  * {             //通配符选择器会作用于所有的样式,大部分用来定义初始化所有内外页边距,但是其优先级是最低的

    属性名:属性值;    //通常一些有经验的web前端工程师习惯性把页边距清零

    ...            //margin:0px ;   padding:0px;

  }

  四个选择器的优先级:  id选择器 > class选择器 > html元素选择器 > 通配符选择器 ;

  父子选择器:                                //eg:   <span="id">我<span>这里</span>有<span>一段</span>代码</span>

  # id {               // " 我 ",“ 有 ” ,“ 代码 ”  会渲染这个样式

    属性名:属性值;            

  }   

  # id  span{            // “ <span>这里</span>”  会渲染这个样式

    属性名:属性值;

  }

  # id span span {         // “ <span>一段</span> ”  会渲染这个样式  

    属性名:属性值; 

  }

  父子选择器总结:父子选择器中可以有多层级(但在实际开发中不建议超过三层),

          父子选择器有严格的层级关系;

          任何类型的选择器都可以有父子选择器;

 

  多个css文件可以相互引用,使用@import  url(“被引入的路径和文件名”)指令引入 ;

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:给自己的职业规划

下一篇:新编html网页设计从入门到精通 (龙马工作室) pdf扫描版