CSS权重

CSS权重

类型	权重
! important	无穷
行间样式	1000
id	100
class/属性选择器/伪类:hover	10
标签选择器/伪元素:after	1
通配符	0

当无法修改插件的样式时,可以用/deep/ [空格]进行深度选择

常用伪类

1. hover和active
2. first-child last-child nth-child(n/odd/even)

常用伪元素

1. ::before 和::after
   伪元素添加内容
   
   HTML:

    <div class="list2">
        <ul>
            <li>吃了好吃的
                <ul>
                    <li>content</li>
                    <li>content</li>
                    <li>content</li>
                </ul>
            </li>
            <li>不开心</li>
            <li>蓝瘦香菇
                <ul>
                    <li>content</li>
                    <li>content</li>
                    <li>content</li>
                </ul>
            </li>
            <li>滚蛋</li>
            <li>嗯哼随心随遇把</li>
        </ul>
    </div>

css:

    .list2{
        padding: 10px;
        border: 1px solid #ccc;
    }
    .list2 li{
        list-style: none;
    }
    .list2 ul{
        counter-reset: xuhao;
    }
    
    .list2 li::before{
        counter-increment: xuhao;
        content: counters(xuhao, ".") " ";
    }

css counter-reset定义一个计数器后面加上一个名字，这个属性在哪个元素上设置则标示遇到这个元素我就重新开始计数，如上面的HTML，我们把这个属性设置到ul上，则遇到ul就重新计数（添加一个新的计数器，原计数器不受影响）。
在li元素的伪元素上接受这个计数值通过counters,第一参数接收计数器，第二参数指明新的计数值以什么字符链接在上一级计数值得后面