权重选择器与伪类选择器计算过程

发布于：2022-03-26 09:01:05  栏目：技术文档

1.权重选择器

HTML部分

    <h1 class="tilie" id="itme">Are you ok?</h1>

css部分

/* 权重级别
id:     千位
class:  百位
标签:    个位 */
/* (权重0,0,2) 没有class和id所以千、百位为0，有body和h1，所以标签个位为2 */
body h1{
    color: chartreuse;
}
/* (权重:0,1,0) 没有id和标签位，有class，百位为1 */
.tilie{
    color: blue;
}
/* 权重:(0,1,2)  没有id，lass百位为1，标签个数有2个，个位为2*/
body h1.tilie {
    color: red;
}
/* (权重:1,1,2)  id为1，千位有1，有class百位为1，标签个位存在2个，个位为2 */
body h1#itme.tilie{
    color: forestgreen;
}
/* !important 最高指示，忽略任何权重，调试代码时使用！ */
/* h1{
    color: coral !important;
} */
/*
最终输出结果为权重为(1,1,2)的绿色
*/

示例

2.结构伪类选择器参数计算过程

HTML部分

    <ul class="list">
        <li>itme1</li>
        <li>itme2</li>
        <li>itme3</li>
        <li>itme4</li>
        <li>itme5</li>
        <li>itme6</li>
        <li>itme7</li>
        <li>itme8</li>
    </ul>

css部分

/* :nth-of-type(an+b)
1: a, 系数,[1.2.3...]
2: n, [0,1,2,3...]
3: b, 偏移量,从0开始
计算出来的索引,必须有效,从1开始  */
/* 选择匹配元素只有俩种情况,
匹配一个元素,和匹配一组元素 */
 /*
 1.匹配一个,匹配一个元素的时候a从0开始    
所以a=0, n从从0开始,[0,1,2...],(an==0n==0),所以,{(0n+3)==(3)} 
*/
/* .list> li:nth-of-type(0n+3){
    background-color: aqua;
} */
/* :nth-of-type(0n+3) == :nth-of-type(3) */
.list> li:nth-of-type(3){
    background-color: red;
}
/* 2
匹配一组元素 ,匹配一组元素的时候 a=1,从1开始
n从0开始,这时候(an)就不等于0,(an)就会有值
后续计算过程为:
    1x0=0
    1x1=1
    1x2=2
    1x3=3
    [1,2,3]...
    循环,直到所有元素都匹配完为止,就能选中一组
*/
/* .list> li:nth-of-type(1n){
    background-color: salmon;
} */
/* 简写 */
.list > *{
    background-color: forestgreen;
}

效果展示

相关推荐