CSS优先选择级测算的标准

日期:2021-01-20 类型:科技新闻 

关键词:微信小程序页面设计,python小程序,小程序首页模板,如何建立微信小程序,怎么做微信小程序

近期在学习培训CSS优先选择级测算的标准这个地区专业知识点挺多的,并且很关键,因此,今日加上1点小笔记。

CSS的权重

1、CSS的引进方法  

1.在连接点元素上,应用style特性  

2.根据link引进外界文档  

3.根据style标识在网页页面内引进

3种引进方法的差别

index.html文档

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF⑻">
        <title>Document</title>
        <link rel="stylesheet" type="text/css" href="body.css">
        <style type="text/css">
            body {
                background: red;
            }
        </style>
    </head>
    <body style="background: yellow;">
    </body>
    </html>

body.css文档

    body {
        background: green;
    }

1.第1种方法相对性后边两种优先选择级高,与引进次序不相干 不管link和style标识放在head内,還是放在body内,或放在html标识末尾,网页页面都会展现yellow

2.第2种和第3种为平级引进,后引进的款式遮盖以前的引进款式 去掉body上的style标识  

调剂link和style标识的前后次序。link在前,style标识在后,网页页面展现red,相反,网页页面会展现green

2、获得连接点的方法  

1.id  

2.class  

3.标识  

4.特性

id

在1个网页页面中id值应当是唯1,可是,当出現好几个同样id时,款式对全部id连接点是合理的,应用方法:#后边跟连接点id值

<body>
  <p id="id_p">第1个段落</p>
  <p id="id_p">第2个段落</p>
</body>
#id_p {
  color: red;
}

結果显示信息,两个段落中的文本都展现red  

1.id相对性class和标识具备更高的权重,当id和class、标识另外对1个连接点设定款式时,id的权重为最高  

2.根据link和style标识对同1个id设定款式时,后引进的款式遮盖以前的款式

class

应用class能够对好几个连接点另外设定款式,而且能够叠加class应用。应用方法.后边跟连接点单独class名

<body>
  <p class="class-p">第1个段落</p>
  <p class="class-p class-p⑵">第2个段落</p>
</body>
.class-p {
  color: red;
}
.class-p⑵ {
  color: green;
}

此时,第1个段落展现red,第2个段落展现green

调剂html

<body>
  <p class="class-p">第1个段落</p>
  <p class="class-p⑵ class-p">第2个段落</p><!-- 替换class-p 和 class-p⑵ 的次序  -->
</body>

调剂class-p和class-p⑵的部位后,网页页面展现实际效果不会改变。表明:class款式的3D渲染和class的应用次序不相干,与class款式设定的前后次序相关,同权重的class款式,在款式设定中,靠后的款式设定遮盖以前的款式设定

特性

根据连接点上的特性还可以获得要开展款式设定的连接点

<body>
  <p>第1个段落</p>
  <p title="第2个段落的title">第2个段落</p>
</body>
[title] {
  color: red;
}

第2个段落有title特性,因此第2个段落展现red

标识

根据标识名获得连接点开展款式设定

<body>
  <p>第1个段落</p>
  <p>第2个段落</p>
</body>
p {
  color: red;
}

网页页面中全部p标识连接点展现red

混和

以上4种方法能够混和应用,对相应的连接点开展款式设定。融合方法包含等级嵌套循环、款式叠加、连接点关系等。最后以权重高者为展现实际效果。

3、款式权重

以上4种方法,对于单独而言,id最高,class和特性同级(后边的款式遮盖以前的款式),标识最低。

当4种方法混和应用时,则以权重的結果为准。对同1结点存在的id、class、特性和标识款式开展排列,排位第1者为最后展现实际效果。比如:针对连接点p存在多种多样种类的款式设定,最先选择全部带id的款式,包含嵌套循环款式。同样id下,对另外一种类款式开展排列

<body class="body">
  <p id="id_p">第1个段落</p>
</body>

 

.body #id_p {
  color: red;
}

#id_p {
  color: green
}

尽管两种款式设定都有id,而且green实际效果在red以后被设定,可是根据排列能够获得同样#id_p下,前1个存在.body,因此最后展现实际效果为red

存在class、特性和标识的款式时,先后排列,同种类或同权重(class和特性同权重)的款式,靠后的款式遮盖以前的款式(以种类为准,不以名字为准),最后排位第1者为最后展现实际效果。

留意:  

1.嵌套循环、叠加、>、 +等方法,不容易危害最后实际效果。  

2.:nth-child、:first-child、:last-child等伪类高于class和特性

4、!important

!important为款式中的特例,它的权重为最高,高于id、class、特性、标识和style特性

<body class="body" style="background: red"></body>
.body {
  background: green !important;
}

网页页面展现实际效果为green。可是当对款式设定开展排列时,依然是同种类款式下,以另外一种类权重高者为最后实际效果。比如

body.body {
  background: blue !important;
}
.body {
  background: green !important;
}

同样class及!important下,前1种款式设定存在body标识,后1种则沒有,因此最后实际效果展现blue

表明

1.尽可能防止应用!important。由于!important权重最高,会对连接点的该特性做强制性性设定,在应用时要谨慎

2.应用情景

  • 引进软件时,对软件中的款式开展强遮盖。当引进软件时,在不想改动软件中的款式编码状况下,可根据!important对软件内的款式特性开展强制性复写
  • 对行内款式开展强遮盖。针对全自动转化成或动态性引进的的带有行内款式html构造时,能够根据!important对行内款式开展强制性复写

1.变通

!important在许多情况下是不提议应用的,在stylelint中有1项标准即严禁应用!important。有1种变通的方法,能够在大部分状况下完成相近!important`的实际效果

html <body class="body"> <p class="p"> <span class="span">1段文字</span> </p> </body>

css .body .p .span { color: red; } .span.span.span.span.span {/** 本身款式叠加 **/ color: green; }

在不考虑到行内款式和id的状况下,对本身款式开展反复叠加数次应用,能够提升class权重,对款式开展复写。

应用前提条件:  

1.沒有行内款式style特性  

2.沒有id款式  

3.本身款式叠加次数过剩嵌套循环个数

益处:无需考虑到DOM等级关联,降低等级嵌套循环

5、总结

综合性以上表明,权重的测算基础遵循下列标准:  

1.按种类比对,种类权重高者显示信息;  

2.同种类,按数量比对,多者显示信息;  

3.同数量,按前后次序比对,后者显示信息

嵌套循环的应用提议

款式嵌套循环应用,除提升权重外,也反映了DOM的某种构造关联。但嵌套循环其实不是在任何状况下都必须的。

  1. 嵌套循环多用于块内特有的款式设定。某种款式仅在某个块内合理,可以使用嵌套循环。
  2. 好几个网页页面另外开发设计时,为防止合拼后款式被遮盖,可以使用嵌套循环。

嵌套循环的应用其实不是越多越好。嵌套循环越多,权重越大,但另外对网页页面的特性耗费也越大。提议应用承继和款式叠加。  

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

上一篇:详解CSS3挑选器:nth 返回下一篇:没有了