扬州电脑培训_扬州设计培训_室内设计_平面设计_装潢装饰、网页、服装、软装、广告、设计、动漫、陈设、包装、CG游戏、产品设计 服装制版 影视动画 电脑办公
您当前位置:扬州电脑培训>>技术文章>>技术文章>>浏览文章

详解CSS中的的优先级||扬州网页设计师培训班

2015/11/20 18:11:46本站原创 【字体:

优先级是根据由每种选择器类型构成的级联字串计算而成的。他是一个对应匹配表达式的权重。 如果优先级相同,靠后的 CSS 会应用到元素上。

  注意:元素在文档树中的位置是不会影响优先级的

  优先级顺序

  优先级逐级增加的选择器列表:

  通用选择器(*)

  元素(类型)选择器

  类选择器

  属性选择器

  伪类

  ID 选择器

  内联样式

  基于类型的优先级

  优先级是根据选择器类型进行计算的. 在下面的例子中,属性选择器尽管选择了一个ID但是在优先级计算法则中还是根据其类型计算。

  有如下样式声明:

  CSS Code复制内容到剪贴板

  * #foo {

  color: green;

  }

  *[id="foo"] {

  color: purple;

  }

  将其应用在下面的HTML:

  XML/HTML Code复制内容到剪贴板

  

I am a sample text.

 

  演示例子:https://jsfiddle.net/donqi/vmo5m3re/

  选择器优先级一致

  优先级相同的情况下,后边定义的会覆盖前边定义的

  XML/HTML Code复制内容到剪贴板

  

  css:

  CSS Code复制内容到剪贴板

  div{

  height:100px;

  width:100px;

  padding:20px;

  margin:20px;

  border:10px solid hsla(0,0%,0%,0.5);

  background-color:#ccc;

  background-image:url("/favicon.png");

  background-repeat:space;

  background-origin:content-box;

  }

  div.box{

  background-clip:content-box;

  }

  div.border{

  background-clip:border-box;

  }

  div.padding{

  background-clip:padding-box;

  }

更多的课程信息内容,可来电咨询。

咨询热线:15189856352 

联系人:陈老师  

咨询QQ2881322114



视觉焦点

每日推荐