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

最新推荐文章于 2024-06-16 02:10:48 发布

我要你好好的。

最新推荐文章于 2024-06-16 02:10:48 发布

阅读量107

点赞数

文章标签： css

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

版权

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

先上干货：

1. !important，权重10000
2. 行间样式，权重1000
3. id选择器，权重100
4. 类、伪类、属性选择器，权重10
5. 标签选择器、伪元素选择器，权重1
6. 通用选择器（*）、子选择器（>)、相邻选择器（+）、同胞选择器（-），权重为0

下面的就不重要了，就是我踩得坑~

废话不多说，我先贴代码为敬！做的是一个类似于广告图片轮询的效果，最近学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

最低0.47元/天解锁文章

我要你好好的。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于CSS的选择器和优先级问题

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

扫一扫