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

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

时间: 2024-10-27 09:46:35

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

03 通配符选择器 选择器深入讨论(父子选择器、多选择器并存问题、优先级)

通配符选择器 如果希望所有的元素都符合某一种样式,可以使用通配符选择器. * {margin: 0;padding: 0} *(表示所有的元素) 可以让所有html元素的外边框和内边距都默认为0,有时特别有用. 不同的浏览器对不同的左边距和上边距的指定大小是不一样的 一般网页设计师把被内边距和上边距清零,这样就可以避免不同浏览器因边距不同导致打开网页后布局混乱. 这样我们就可以通配符 Margin外边距:定义元素周围的空间. Padding内边距:元素边框与元素内容之间的空白. css11-1.

css引入方式优先级以及不同选择器的优先级区别

我们都知道css有3种基本设置方式即 1.行内也叫嵌入式 例如: <div style='background:red'></div> 2.内联式,在html文件中用style标签包裹着的 例如: <html>   <style type='text/css'>      div{         background:red;      }   </style> </html> 3.链接式,在html文件中用link标签引用进来着的

css笔记09:选择器优先级

1. (1) <!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="C

python 46 css组合选择器 及优先级 、属性选择器

一:css组合选择器 特性:每个选择器位可以为任意基本选择器或选择器组合 选择器分为以下几类: 群组选择器,子代(后代)选择器,相邻(兄弟)选择器,交集选择器,多类名选择器 1.群组选择器: 一次性控制多个选择器 选择器之间以 ,(逗号) 隔开,每一个选择器位均可以任意合法选择器或选择器组合 2.子代(后代)选择器: 一次性控制一个选择器(逻辑最后的那个选择器),前置位的选择器为修饰性选择器 每一个选择器位均可以 为任意合法选择器或选择器组合 子代选择器必须为一个父级嵌套关系,后代选择器可以为一

CSS选择器优先级【转】

样式的优先级 多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 一般情况下,优先级如下: (外部样式)External style sheet <(内部样式)Internal style sheet <(内联样式)Inline style 有个例外的情况,就是如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式. 示例如下: <head>     <style type="text/css&

CSS中选择器优先级顺序实战讲解

我们有些程序猿在给一个元素(比如div)应用样式的时候,会有一些疑问,为什么我写在后面的样式不能覆盖前面的样式呢,不是说CSS是层叠样式表吗? 如果你在开发中也遇到同样的问题,即在给某一元素应用样式的时候(比如写在外部样式表中),写在后面的样式不能覆盖前面定义的样式.这个时候,你可能就得考虑是不是没考虑优先级问题了. 当我们在给一个标签,比如div应用样式的时候,我们得考虑优先级问题. 下面列出的就是是选择器的优先级: 行内样式 > ID选择器样式 > 类别选择器样式 > 标记选择器样式

我给女朋友讲编程CSS系列(2)- CSS语法、3大选择器、选择器优先级

首先看一下使用Css设置h1标签字体颜色和大小的例子,效果图如下: 新建一个网页test.html,然后复制粘贴下面的内容: <html> <head> <style type="text/css"> h1 {color:red; font-size:14px;} </style> </head> <body > <h1>使用Css让h1标签字体变红</h1> </body> &

css选择器 优先级的问题

最近写代码时发现,有时候写出的样式不会被引用.看了一些其他人写的网站源码后,我发现了这样写可以解决问题,如下: 比如说<div class="abc">  <div class="edf">     <div class="fgg">    </div>  </div></div>确定class="fgg"时,写成:.abc .efg .fgg{/* 代码

导航栏布局时遇到的问题以及解决办法 css选择器优先级

得到的导航栏效果 添加#menu ul li{width:30px;} 效果如图 将会使列表项和分隔区域的宽度同时改变因为id选择器的优先级高于类选择器,此时应该为列表项添加内联样式如图 才能得到如下效果 或者可以使用第二种方法 #menu ul li{ float:left; margin-left:10px;text-align:center;padding-left:10px;实现列表项文字的居中 line-height:28px; height:28px; width:40px; bor