欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-30 15:39:50
css,又称样式重叠表,如今的网页的样式基本是div+css写出来的,功能十分强大,要想在html文件中引入css文件需要在标签内输入一行: css的一些 ......

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