【css权重计算、伪类】

CSS权重计算

按照#id、类class、标签：tag的顺序排列进行权重计算

id>class>tag

<style>
        .item{
            /* 权重(0,1,0) */
        }
        span.item{
            /* 权重(0,1,1) */
        }
        div .item{
            /* 权重(0,1,2) */
        }
        #ID .item{
            /* 权重(1,1,0) */
        }
        .su .item{
            /* 权重(0,2,0) */
        }
        .active.item{
            /* 权重(0,2,0) */
        }
        /* !important为调试代码使用 权重最高 */
    </style>
    <div class="su">
        <span class="item active" id="ID">1111</span>
    </div>

伪类选择

<style>
        ul li:nth-of-type(2){
            color: red;
        }
        ul li:first-of-type{
            color: yellow;
        }
        ul li:last-of-type{
            color: blue;
        }
        ul li:nth-of-type(odd){
            background: red;
        }
        ul li:nth-of-type(even){
            background: yellowgreen;
        }
    </style>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
    <style>
        /* 获取偶数索引的元素;匹配一组a=[1,-1,2] 这里面a=2 n=n b=0 2n+0=2n n取值（0，1，2，3...)
        因为:nth-of-type(an+b): 计算出来的索引,必须是有效的, 且从 1 开始的正整数
        所以计算出来的是2，4，6，8...即:nth-of-type(2n)是获取偶数索引的元素 */
        /* 取偶数行 */
        div p:nth-of-type(2n) {
            color: red;
        }
        div p:nth-of-type(2n+1){
            color: aqua;
        }
        /* 同上计算方法，计算出来的是1，3，5，7..即:nth-of-type(2n+1)是获取奇数索引的元素 */
    </style>
    <div>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
    </div>