欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

CSS的工作原理(样式重复的标签,浏览器到底会选择哪个样式)_html/css_WEB-ITnose

程序员文章站 2022-05-25 16:18:10
...
举个例子,标签P,也许会在嵌入样式表、外部样式表中多次被设置相关属性的值(比如color: red;/color : blue),那么浏览器到底是以哪个值来显示P的样式呢???这就是CSS的工作原理。(其中特指度比较重要)

CSS有3种工作机制:1.继承 2.层叠 3.特指 (其中层叠原则是基于继承和特指的)

1.继承 :css中的祖先元素会向后代传递一样东西:CSS属性的值。body是所有元素的祖先,如果我们指定body{color:red;},那么文档中的所有元素都继承这一样式。这就是为什么,我们在记事本程序写了一行字以后,重命名为:xxx.html,在用不同浏览器打开时,会有不同的字体效果,因为每个浏览器都有自己的预定义样式表,其中包括body中的字体属性,而我们用浏览器打开我们的Html时,我们继承了这个属性。

当然,不是所有的属性都能被继承,能被继承的属性大多数和文本有关,比如颜色、字体、字号等。而有些属性,被继承下来没有意义,或者被继承下来会影响页面的布局,比如涉及元素定位,margin,padding,border等属性。

2.层叠 :也就是CSS中的C(cascading),主要是按照样式来源和特指度来层叠。

a)样式来源 :以下是浏览器层叠各个来源样式的顺序:

  1. 浏览器默认样式表
  2. 用户样式表(比如有视力障碍的用户,加了一个body{font-size:200%})
  3. 开发者外部样式表(按照引入到页面中的先后顺序)
  4. 开发者嵌入样式表
  5. 开发者行内样式表
  6. 注意:3 4的顺序是看

越往下的优先级越高,也就是说浏览器会优先选择后面来源设置的样式(如果存在的话)

b)特指度 :是针对选择器的计分规则,分高的选择器会被选中。公式有3个需要计算的值 :I-C-E ,规则如下

  1. 选择器中有一个ID选择器,就在I上加1
  2. 选择器中有一个类选择器,就在C上加1
  3. 选择器中有一个标签名,就在E上加1
  4. 得到一个3位数
  5. 先比较高位,高位高既为高,比如1-0-0 是比 0-12-0 高的,优先选择。以此类推,如果特制度相同,后申明的样式被选中。

选择器,也有叫选择符的,英文应该是selector,CSS有很多种选择器,此处不详谈。

举个特指度的例子:

p 0-0-1特指度=1
p.classp1 0-1-1特指度是11
p#idp1 1-0-1特指度是101
body p#idp1 1-0-2特指度是102
body p#idp1 ul.classul1 1-1-3特指度是113
body p#idp1 ul.classul1 li 1-1-4特指度是114

基于3种工作机制,总结3条规则,适用所有情况。

1)ID选择器大于类选择器,类选择器大于标签选择器。一句话:特指度高的选择器(选择的更明确)被选中。

2)浏览器按照html文档顺序读取各个样式表,后面的样式表会覆盖掉前面样式表的相同属性的样式。如果后面的样式特指度低,则无法覆盖前面的样式

注意:规则1 强于 规则2 ,如果特指度高,无论在哪里(除去行内),都会被选中。行内的优先级最高(但是行内的style一般不用,

),其次是特指度。

3)设定的样式优于继承的样式

例子1 :id选择器优于类选择器
  • 列表项1
列表1为黄色

例子2 :嵌入样式表和外部样式表,选哪个(主要看浏览器按顺序,后读取的会覆盖点前面读取的),相同特指度的时候
  • 列表项1
  • (黄色)外部样式表demo.css

    .li1{
    color:yellow;}

如果是这个顺序,style标签在前,link在后



为黄色

例子3:选择特指度高的(如按顺序,应该选择link的黄色,但是style中的特指度高 1-0-2 大于 1-0-1,所以选特指度高的红色),后面读取的特指度低的就不会覆盖前面特指度高的。
  • 列表项1
  • demo.css

    div #li1{
    color:yellow;}

为红色

例子4:行内style有最高优先级,前面的代码不变,只在p中加了style blue,列表项立马变成蓝色虽然行内的有最高优先级,但是行内style本身就不常用(不方便移植,增加网页大小)
  • 列表项1
  • 例子5 :设定的样式优于继承的样式,即使继承的样式特指度高(在li中加入em,em继承了li的特指度是102,em本身的特指度是001,但是仍然选em)
    • 列表项1
    列表项为黑色。CSS的工作原理(样式重复的标签,浏览器到底会选择哪个样式)_html/css_WEB-ITnose

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • CSS的工作原理(样式重复的标签,浏览器到底会选择哪个样式)_html/css_WEB-ITnose
  • 专题推荐

    作者信息
    CSS的工作原理(样式重复的标签,浏览器到底会选择哪个样式)_html/css_WEB-ITnose

    认证0级讲师

    推荐视频教程
  • CSS的工作原理(样式重复的标签,浏览器到底会选择哪个样式)_html/css_WEB-ITnosejavascript初级视频教程
  • CSS的工作原理(样式重复的标签,浏览器到底会选择哪个样式)_html/css_WEB-ITnosejquery 基础视频教程
  • 视频教程分类