选择器权重，伪类选择器计算

1.选择器权重

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器权重</title>
</head>
<style>
    /* 1,1,1    1个id,1个class,1个tag */
    h1#hello.hello{
        color: firebrick;
        background-color: deepskyblue;
    }
    /* 1,0,0    1个id */
    #hello{
        background-color: crimson;
    }
    /* 0,1,0    1个class */
    .hello{
        background-color: cornflowerblue;
    }
    /* 0,0,2    2个tag */
    body h1{
        color: chocolate;
    }
    /* 0,0,1    1个tag */
    h1{
        color: chartreuse;
    }
</style>
<body>
    <h1 id="hello" class="hello">Hello World</h1>
</body>
</html>

2.伪类选择器计算

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器计算</title>
</head>
<style>
    /* 后代里的第一个元素 <li>item5-1</li> */
    ul>li ul>li:first-of-type{
        color: red;
    }
    /* 后代里的最后一个元素 <li>item5-3</li> */
    ul ul>li:last-of-type{
        color: blue;
    }
    /* 2n+1 的计算方式为
    2*0+1 = 1
    2*1+1 = 3
    2*2+1 = 5
    2*3+1 = 7
    ...
    所以实际是选中奇数行
    */
    ul>li:nth-of-type(2n+1){
        color: lightcoral;
    }
    /* -n+2 的计算方式为
    -1*0+2 = 2
    -1*1+2 = 1
    -1*2+2 = 0
    所以实际是选中前2行
    */
    ul>li:nth-of-type(-n+2){
        background-color: blueviolet;
    }
</style>
<body>
    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5
            <ul>
                <li>item5-1</li>
                <li>item5-2</li>
                <li>item5-3</li>
            </ul>
        </li>
        <li>item6</li>
        <li>item7</li>
        <li>item8</li>
        <li>item9</li>
    </ul>
</body>
</html>

选择器权重，伪类选择器计算

选择器权重，伪类选择器计算

1.选择器权重

2.伪类选择器计算

更多相关文章

随机推荐