码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2018-04-06 15:35:02      阅读:243      评论:0      收藏:0      [点我收藏+]

标签:post   html标签   css   习惯   优先级   网页   div   span   标签   

  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(“被引入的路径和文件名”)指令引入 ;

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

标签:post   html标签   css   习惯   优先级   网页   div   span   标签   

原文地址:https://www.cnblogs.com/privateWa/p/8727544.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!