精通css(3)-优先级那些事儿

简介:

同一个元素可能会有多个样式,这些样式很可能会冲突,css通过层叠的过程来处理这种冲突,简单的说就是给每个规则分配一个重要度。

1.层叠

层叠重要度从高到低排列顺序:

1.标有!important的用户样式;

2.标有!important的作者样式;

3.作者样式;

4.用户样式;

5.浏览器/用户代理默认样式;

2.优先级的计算

一般而言,选择器越特殊,它的优先级越高。也就是选择器指向的越准确,它的优先级就越高。通常我们用1表示标签名选择器的优先级,用10表示类选择器的优先级,用100标示ID选择器的优先级。直接在网页中用sytle="...."的优先级最高,为1000,但是不推荐这样用,你懂的。举个例子:

    div.test1 .span p{...} 优先级= 1+10 +10 +1  
    span#xxx .songs li {...}优先级=1+100 + 10 + 1  
    #xxx li {...}优先级= 100 +1 
另外,伪元素的优先值同html 其他元素,伪类的优先值与类的计算一样,还有类似["id=content"]这样的选择器,也跟类的级别一样。

3.继承

继承就是应用样式的元素后代会继承样式的某些属性。这句话很容易理解,但是"某些属性"有些坑啊,你特么到底是哪些属性啊?

首先要明确一点:直接应用于元素的任何样式都会覆盖继承而来的属性。比如你对body设置了font-size:10px;的属性,但是h1,h2都不听你的,因为浏览器默认给h1,h2设置了字体大小,覆盖了继承而来的样式。

然后网页中用到的继承大多都是文本方面的继承,比如font-size,font-color之类的。边框类的属性是不能继承的,比如border,margin,padding什么的,这个要是能继承网页就完蛋了。

有些浏览器在继承方面还有些问题,比如说高贵冷艳的IE,在继承表格字号方面会有些问题。总的来说,在写代码的时候除了文本继承外,其他的都不要指望用继承了,直接用选择器会更好些。



相关文章
|
6月前
|
前端开发 算法
CSS语言的层叠和优先级
CSS语言的层叠和优先级
|
6月前
|
前端开发 算法
CSS 选择器的优先级算法
在CSS中,选择器的优先级由四个级别和各级别的出现次数决定**。这四个级别分别为:行内选择符、ID选择符、类别选择符、元素选择符,优先级依次降低。
|
6月前
|
人工智能 前端开发 Cloud Native
css选择器有哪些?优先级?哪些属性可以继承?
css选择器有哪些?优先级?哪些属性可以继承?
|
XML 前端开发 数据格式
CSS引入方式这么多是什么优先级?
CSS引入方式这么多是什么优先级?
80 0
|
2月前
|
前端开发 JavaScript 容器
谁动了我的选择器?深入理解CSS选择器优先级
该文章详细解释了CSS选择器的工作原理,包括不同种类选择器的权重计算规则,并通过实例说明了如何解决样式冲突问题,确保所需的样式能够正确应用到目标元素上。
|
2月前
|
前端开发
前端基础(四)_CSS层叠样式表_什么是css_css样式的引入方式_样式表的优先级_样式选择器
本文详细介绍了CSS(层叠样式表)的基本概念、语法规则、引入方式、样式表的优先级和样式选择器。文章解释了CSS的作用,展示了如何在HTML中通过行内样式、内部样式和外部样式引入CSS,讨论了不同CSS选择器的优先级和如何确定最终的样式应用。此外,还强调了使用`!important`规则时的优先级高于行内样式。
88 1
|
4月前
|
前端开发 JavaScript 算法
CSS【详解】样式选择器的优先级(含提升优先级的方法)
CSS【详解】样式选择器的优先级(含提升优先级的方法)
128 0
CSS【详解】样式选择器的优先级(含提升优先级的方法)
|
5月前
|
前端开发 开发者
深入解析CSS样式表的优先级
深入解析CSS样式表的优先级
|
5月前
|
前端开发 开发者
CSS基础-层叠与优先级
【6月更文挑战第10天】本文探讨了CSS中的层叠和优先级概念,解释了层叠上下文和特异性如何决定样式生效。常见问题包括误解后来居上的规则、特异性计算错误及过度使用`!important`。建议开发者理解特异性计算,合理使用层叠上下文,避免不必要的`!important`。通过示例展示了特异性与`!important`对样式的影响,强调实践和理解是提升CSS技能的核心。
41 1
|
5月前
|
前端开发
CSS 选择器优先级详解及实例演示
CSS 选择器优先级详解及实例演示