网站建设资讯

NEWS

网站建设资讯

css覆盖行内样式,css 行内样式

css选择器层叠、优先级、样式冲突

上面是一个简单的html案例,对于同一个元素应用多个规则时,规则中可能包含冲突的声明,在style样式表中包含了三个规则集,每一个规则给它指定了不同的字体颜色。标题不可能同时拥有三种颜色,所以最终的效果是显示的红色(red)。

我们提供的服务有:网站设计、成都网站设计、微信公众号开发、网站优化、网站认证、义安ssl等。为上千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的义安网站制作公司

浏览器如何知道并解决声明冲突,这其中层叠指的就是这一系列规则。它决定了如何解决冲突,是css语言的基础。层叠会依据三种条件解决冲突。

叠层的规则是按照这种顺序来考虑的,看下图

这些规则让浏览器可以以预测的方式解决css样式规则中的冲突。

你添加到网页里的样式表并不是浏览器唯一使用的样式表,还有其他类型或来源的样式表。你的样式表属于作者样式表,除此之外还有用户代理样式表,即浏览器默认的样式。用户代理样式表优先级低,你的样式会覆盖它们。

用户代理样式表在不同浏览器上稍有差异,但是大体上是在做相同的事情:为标题 h1 到 h6 和段落 p 添加上下边距,为列表 ol,ul 添加左侧内边距,为链接添加颜色,为元素添加各种默认字号。

浏览器应用了用户代理样式表后才会应用你的样式表,即作者样式表,你指定的声明会覆盖用户代理样式表里面的样式,如果在html里链接了多个样式表,那么它们的来源都相同,即属于作者样式表。

用户代理样式表因为设置了用户需要的样式,所以不会做出一些超出预期的事情,当不喜欢默认样式的时候,可以在自己的样式表里面设置别的样式来覆盖用户代理样式即可。

作为一个标准的前端打工仔,必定熟悉覆盖代理样式。这种做法实际上就是利用了层叠的样式来源规则。你写的样式会覆盖用户代理样式,因为来源不同。

样式来源规则有一个例外,标记为重要 !important 的声明。该声明就会被标记为重要的声明。

标记了 !important 的声明会被当做更高优先级的来源,因此总体的优先级按照由高到低排列,如下所示:

如果无法用来源解决冲突声明,浏览器会尝试检查它们的优先级。理解优先级很重要,因为作者样式几乎都是属于优先级的范围,日常工作接触的大部分开发样式是来自于同源,如果不理解优先级,写出来的css样式会被坑的很惨。

浏览器将优先级分为两部分:HTML的行内样式和选择器的样式。

如果HTML的style属性写样式,这个声明只会作用域当前元素。实际上行内元素属于“带作用域”的声明,它会覆盖任何来自样式表或style标签的样式。行内样式没有选择器,因为它们直接作用于所在的元素。

上面就是一个行内样式,设置了颜色color为黄色yellow。

如果你希望在样式表中覆盖行内样式的声明,需要在样式表中对应标签下的声明后添加 !importanta ,这样能够将它提升到一个更高优先级来源。但如果行内样式也被标记为 !imortant 那就无法覆盖它了。最好不要在行内使用 !important ,而是只在样式表中使用 !important 。

优先级的第二部分是由选择器优先级决定。比如,有两个类名的选择器比只有一个类名的选择器优先级更高。具体可以看下面的案例。

通过比较选择器类型来决定哪个选择器优先值最高。

上面的样式表中最终显示的color颜色值为红色(red)。

一个常用的表示优先级的方式是用数组形式来标记,通常用都好隔开每个数。比如“1,2,3”表示用1个id、2个类、2个标签组成。优先级最高的id列为第一位,紧接着是类,最后是标签。

我们可以通过下面的表格来查看各种选择器和对应的优先级。

现在,通过比较数值就能快速明确决定哪个优先级更高。所以上面的顺序是"1,0,0""0,2,0""0,1,3""0,0,4"。而优先级低的样式表会被优先级高的样式表给覆盖。

我们日常开发不建议某个元素的样式表写过长的标签名和类名连体。一般只要能够区分优先级即可。

叠层的第三步,也是最后一步,是源码顺序。如果两个声明的来源和优先级相同,其中一个声明在样式表中出现较晚,或者位于页面较晚引入的样式表中,则该声明胜出。

在上面方法中,选择器优先级相同,都是(0,1,1),最终浏览器呈现的颜色color是灰色gray。

CSS样式覆盖问题

请按照下面标准执行即可;

1.行内样式>指定样式>通用class样式通用未指定CLASS样式

2.例子:

1)div style="..."aaaaaa/a这就是指定用style的行内样式;

2)div id="side" aaaaaa/div这就是指定id使用side样式;

3)div class="ot"aaaaaa/div这就是指了通用的class为ot的样式;

4)如bodytabletrth这些一开始样式文件就定义好全程的样式,为通用为指定的样式;

最高就是指行内样式,接着就是指定ID的,然后就是CLASS,最后就是未指定通用样式;

CSS样式被覆盖

请按照下面标准执行即可;

1.行内样式>指定样式>通用class样式通用未指定CLASS样式

2.例子:

1)div style="..."aaaaaa/a这就是指定用style的行内样式;

2)div id="side" aaaaaa/div这就是指定id使用side样式;

3)div class="ot"aaaaaa/div这就是指了通用的class为ot的样式;

4)如bodytabletrth这些一开始样式文件就定义好全程的样式,为通用为指定的样式;

最高就是指行内样式,接着就是指定ID的,然后就是CLASS,最后就是未指定通用样式;

关于CSS属性覆盖的问题

你先查看标签是否在调用css有设置样式,如果有设置,需要改的话,就写内联样式覆盖,内联样式优先级是最高的,,不会影响调用的css,也能达到你想要的效果。


当前文章:css覆盖行内样式,css 行内样式
网页路径:http://njwzjz.com/article/dsdiijo.html