关于css权值的问题

最近迷上html5,看了一些相关学习资料,现在把css中常见易出错易混淆的知识总结一下:

首先说一下关于css样式继承,重叠和特殊性:

有的时候我们会为同一个元素设置不同的css样式代码,那么元素会启用哪一个css样式呢?

浏览器是根据权值来判断使用哪种样式的,权值越高,就使用哪种样式。

下面是权值的规则:

标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100

1.特殊性

还有一个权值比较特殊----继承也有权值但是很低,有的文献提出它只有0.1,所以可以理解继承的权限最低。

2.层叠

但是如果html引用的多个css样式具有相同的权值该会用哪一个样式呢?下面就来说说层叠这个问题。

当有相同权重的样式存在时,浏览器会根据这些css样式的前后顺序来决定,处于最后面的css样式将会被应用,这就不难理解了:

内联样式表(标签内部)>嵌入样式表(当前文件中)>外部样式表(外部文件中)

3.重要性

我们在做网页代码时,有些特殊的情况需要为某些样式设置最高权值怎么办?这时我们可以使用!important来解决!

这里需要注意的是当网页制作着不设置css样式时,浏览器会按照自己的一套样式来显示网页,并且用户可以在浏览器中设置自己习惯的样式,比如有的用户习惯把字号设置的大一些,使其查看网页的文本更加清楚,这时注意样式的优先级为:浏览器默认的样式<网页制作者的样式<用户自己设置的样式,但记住!important优先级是个例外,权值高于用户自己设置的样式。

待续...

时间: 2025-01-07 05:12:16

关于css权值的问题的相关文章

CSS 权值 层叠 重要性(!important)

1.特殊性 权值 有的时候我们为同一个元素设置了不同的CSS样式代码,那么元素会启用哪一个CSS样式呢?我们来看一下面的代码: p{color:red;} .first{color:green;} <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩.</p> p和.first都匹配到了p这个标签上,那么会显示哪种颜色呢?green是正确的颜色,那么为什么呢?是因为浏览器是根据权值来判断使用哪种

9.css权值

有的时候我们为同一个元素设置了不同的CSS样式代码,那么元素会启用哪一个CSS样式呢?我们来看一下面的代码: p{color:red;} .first{color:green;} <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩.</p> p和.first都匹配到了p这个标签上,那么会显示哪种颜色呢?green是正确的颜色,那么为什么呢?是因为浏览器是根据权值来判断使用哪种css样式的,权值

css权值和优先级+命名规范

选择器权值: 标签选择器:1 类选择器和伪类选择器:10 ID选择器:100 通配符选择器:0 行内样式:1000 !important 在一定条件下,优先级最高 常用的css样式命名 页面结构页头:header页面主体:main页尾:footer内容:content/container容器: container 导航:nav侧栏:sidebar栏目:column页面外围控制:wrapper左右中:left right center 导航导航:nav主导航:mainnav子导航:subnav顶导

css权值计算

外部样式表<内部样式表<内联样式: HTML 标签选择器的权值为 1: Class 类选择器的权值为 10: ID 选择器的权值为 100: 内联样式表的权值最高 1000: !important权值最高: 脚本的样式最牛逼: 以上所有都一样,看顺序,后者覆盖前者.

CSS权值比较(读书笔记)

1.继承0.1    标签1    类选择符10    ID选择符100 2.层叠:后面的样式会覆盖前面的样式. 3.内联样式表(标签内部) > 嵌入样式表(当前文件中) > 外部样式(外部文件) 4.!important具有最高权值,p{color:red  !important;} 5.!important > 用户自己设置的样式 > 网页制作者样式 > 浏览器默认样式

css选择器权值

有的时候我们为同一个元素设置了不同的CSS样式代码,那么元素会启用哪一个CSS样式呢?我们来看一下面的代码: p{color:red;} .first{color:green;} <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩.</p> p和.first都匹配到了p这个标签上,那么会显示哪种颜色呢?green是正确的颜色,那么为什么呢?是因为浏览器是根据权值来判断使用哪种css样式的,权值

CSS样式权值

内联样式表(InLine style)>内部样式表(Internal style sheet)>外部样式表(External style sheet) 例外:但如果外部样式表放在内部样式表下边引用,则外部样式表>内部样式表; 1,内联样式表权值为1000; 2,ID选择器的权值为100; 3,Class类选择器的权值为10; 4,HTML标签选择器的权值为1; 具体代码如下: <!DOCTYPE html> <html lang="en"> &

记录:CSS特殊性——权值规则

浏览器是根据权值来判断使用哪种css样式的,权值高的就使用哪种css样式. 下面是权值的规则: 标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100.例如下面的代码: p{color:red;} /*权值为1*/ p span{color:green;} /*权值为1+1=2*/ .warning{color:white;} /*权值为10*/ p span.warning{color:purple;} /*权值为1+1+10=12*/ #footer .note p{color:

特殊性(权值)

有的时候我们为同一个元素设置了不同的CSS样式代码,那么元素会启用哪一个CSS样式呢?我们来看一下面的代码: p{color:red;} .first{color:green;} <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩.</p> p和.first都匹配到了p这个标签上,那么会显示哪种颜色呢?green是正确的颜色,那么为什么呢?是因为浏览器是根据权值来判断使用哪种css样式的,权值