首页 > Web开发 > 详细

CSS基础 - 两大核心概念、权重值、优先级

时间:2017-04-16 15:01:53      阅读:304      评论:0      收藏:0      [点我收藏+]

1 CSS两大核心概念

 

CSS层叠

 

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中,在 HTML 页的头元素中,或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

 

CSS继承

 

子元素从父元素继承属性,但不是所有元素都可以继承

 

可继承:visibility、color、font、font-family、font-size、font-style、font-weight、text-decoration、text-align、list-style

 

不可继承:display、margin、border、padding、background、height、width、overflow、position、left、right、top、bottom、z-index、float、clear、

 

2 CSS优先级及权重值

 

2.1 优先级

 

CSS样式表种类:

 

  1. 浏览器缺省设置 (浏览器默认样式设置)

 

  1. 外部样式表

 

  1. 内部样式表(位于 标签内部)

 

  1. 内联样式(在 HTML 元素内部) (优先权最高)

 

优先级等级:

 

内联样式内部样式外部样式(同时引入内部样式和外部样式,两个优先级一样,后加载的样式会覆盖先加载的)浏览器默认样式

 

2.2 权重值

 

每个等级的值为其所代表的选择器的个数乘以这一等级的权值,最后把所有等级的值相加得出选择器的特殊值。

 

权重值的4个等级的定义如下:

 

第一等:内嵌样式,如: style="",权值为1000第二等:ID选择器,如:#content,权值为0100

 

第三等:类,伪类选择器和属性选择器,如.content,权值为0010第四等:元素选择器,如div p,权值为0001

 

权重值

 

a

 

b

c

d

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

内嵌样式

 

1

 

0

0

0

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

ID选择器

 

0

 

1

0

0

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

类,伪类,属性

 

0

 

0

1

0

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

元素选择器

 

0

 

0

0

1

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

通用选择器(*),子选择器(>)和相邻同胞选择器(+)权重值都为0000

 

 

!important自身不存在优先级,但可以让其他所有优先级失效;

CSS基础 - 两大核心概念、权重值、优先级

原文:http://www.cnblogs.com/webzp/p/6718725.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!