关于CSS的选择器和优先级问题

先来说说我为啥会注意到这个，最近跟着B站的blue老师敲JS，写到一个小东西时，我发现我逻辑上跟老师的代码几乎一样，怎么我的.active一直只能加载font-size，其他属性一概忽略呢？整了好久，拿着老师的代码换，发现就能全部加载，我简直怀疑人生，后来百度了一下，一句“可能被全局属性覆盖了”，我才想起好像是有优先级这么回事，赶紧改了改，发现好了T_T，就这么点破事折腾我半天时间，怪我自己太菜了！

废话不多说，我先贴代码为敬！做的是一个类似于广告图片轮询的效果，最近学JS总跟CSS杠上，才知道CSS也要好好学扎实，用起来才顺手。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {margin: 0; padding: 0;}
        li {list-style: none; }
        img { border: none; }

        body { background: #ecfaff; }

        #div1 {
            position: relative;
            width: 470px;
            height: 150px;
            border: 1px solid #cccccc;
            margin: 100px auto 0;
            overflow: hidden;
        }

        /* 从id到标签，与从标签到标签，其优先级不一样，这也是导致我的类在后面就加载不出来的原因，之前本菜之前用的#tab li，这确实不是个好习惯*/
        ol {position: absolute; right: 5px; bottom: 5px;z-index: 99999;}
        ol li {
            font-size:12px;
            font-family: arial;
            float: left;
            margin-right: 3px;
            border: 1px solid #f47500;
            background: #fcf2cf;
            color: #d94b01;
            padding: 2px 6px;
            display: inline;
            cursor: pointer;     //光标变成手
        }

        /* 下方script内移动的是整个UL
        故不要在头部定义ul的大小
        更不要试图用ul来hidden想要藏住的图片
        而是用ul外层的div来hidden
        那么就不能让div与ul间还有多余距离来做边框了
        */
        #pic {position: relative; top:0; left:0;}
        #pic li {width: 470px; height: 150px;}
        #pic img { width: 470px; height: 150px; }

        .active {font-weight: bold; color: #ffffff; background: #ffb442;}



    </style>
    <script src="move.js"></script>
    <script>
        window.onload = function () {

            var oDiv = document.getElementById("div1");
            var oUl = oDiv.getElementsByTagName("ul")[0];
            var aTagLi = oDiv.getElementsByTagName("ol")[0].getElementsByTagName("li");

            var now = 0;


            for (let i = 0;i<aTagLi.length;i++)
            {
                aTagLi[i].onclick = function () {
                    now = i;
                };
            }

            function tab() {
                for(let i=0;i<aTagLi.length;i++)
                {
                    aTagLi[i].className = '';
                }
                aTagLi[now].className = "active";
                startMove(oUl,'top',-150*now);
            }

            function next() {
                now++;
                if(now==aTagLi.length)now=0;
                tab();
            }

            var timer = setInterval(next,2000);

            oDiv.onmouseout = function(){
                timer = setInterval(next,2000);
            };


            oDiv.onmouseover = function () {
                clearInterval(timer);
            };
        }
    </script>
</head>
<body>
<div id="div1">
    <ol id="tag">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ol>
    <ul id="pic">
        <li><img src="taobao/1.jpg"></li>
        <li><img src="taobao/2.jpg"></li>
        <li><img src="taobao/3.jpg"></li>
        <li><img src="taobao/4.jpg"></li>
        <li><img src="taobao/5.jpg"></li>
    </ul>
</div>
</body>
</html>

结论：ID选择符>类选择符>HTML选择符
当然，有其他办法提高优先级，在{ }内加！important，这时优先级最高。

顺带把选择器都总结了下，

标签选择器

	li {...}
	img {...}

类选择器

	.active {...}

ID选择器

	#pic {...}

以上3种比较基础，要注意的是：一个元素可以同时有几个类，而ID确是唯一的。基础选择器的叠加用法如下：

子选择器
通过“>”进行选择，仅是指它的直接后代，即第一代后代。

	ol>li {...}

后代选择器
作用于所有子后代元素。后代选择器通过空格来进行选择。

	ol li {...}

通用选择器
功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素.

	* {...}

分组选择器
为html中多个标签元素设置同一个样式时，可以使用分组选择符（，）

	p h1 {...}

这种优先级问题，一旦知道后，以后一些细节也比较好处理，就像类似于let，var，const的作用域一样，用好了得心应手，用不好代码改的稀烂还不报错。

找bug期间，我还考虑到了overflow：hidden可以消除float的效果，以及消除float的其他办法，看到有blog写的不错，先贴上，下次接着写。
为什么"overflow:hidden"能清除浮动的影响
 bfc是什么

来源：CSDN

作者：我要你好好的。

链接：https://blog.csdn.net/weixin_43845044/article/details/104507320

标签

css选择器

优先级

css