<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

    <title>Document</title>

    <script></script>

    <style>

        .flex-container {

            display: flex;

            color: white;

        }

        .flex-container .flex-item {

            background-color: red;

            width: 100px;

        }

        .sel {

            background-color: black;

        }

    </style>

</head>

<body style="width: 100%">

    <div class="flex-container">

        <div class="flex-item sel">

            1

        </div>

        <div class="flex-item">

            2

        </div>

        <div class="flex-item">

            3

        </div>

    </div>

</body>

</html>

.sel不会生效，因为css先按权重排序，权重大的样式优先使用，权重一样的才按先后顺序

.flex-container .flex-item 有两个选择器，权重是两个相加，所以权重大

改成：

.flex-item {
background-color: red;
width: 100px;
}
 
.sel {
background-color: black;
}
 
或者：
.flex-container .flex-item {
background-color: red;
width: 100px;
}
 
.flex-item.sel {
background-color: black;
}
都可以使sel可以生效

css权重导致的样式不生效问题的更多相关文章

  1. css权重是什么

    css权重是什么? 概述 css Specificity中文一般译为css优先级.css权重.相比"权重","优先级"更好理解,mozilla官方中文文档就翻译 ...

  2. CSS - 权重，样式优先级

    关于CSS权重,一套计算公式来去计算,就是 CSS Specificity,我们称为CSS 特性或称非凡性,它是一个衡量CSS值优先级的一个标准. 遇到样式应用问题,计算一下权重就知道优先级. 具体规 ...

  3. vue mand-mobile ui加class不起作用的问题 css权重问题

    vue mand-mobile ui加class不起作用的问题 css权重问题组件的样式优先权比自己定的class高多加几层权重才行,要直接用样式覆盖也可以在前面多加几层class,定位更精确了才会覆 ...

  4. less文件的样式无法生效的一个原因，通过WEB浏览器访问服务器less文件地址返回404错误

    有一种情况容易导致less文件的样式无法生效,就是部分服务器(以IIS居多)会对未知后缀的文件返回404,导致无法正常读取.less文件.解决方案是在服务器中为.less文件配置MIME值为text/ ...

  5. css权重 vs 浏览器渲染 -- css之弊病

    昨日,突现一个bug,令人十分恼火. 基本场景 自己实现一多选日历,可多选多天(相连或不相连均可)."贵司"的需求真心有些小复杂了,"市面"上没有这样的相似的东 ...

  6. Css选择器(上) 让样式无孔不入

    css选择器    一个可以选择样式的工具, 这里适用于无论是内部代码还是外部引用 abc.css 这类型的文件. 基本选择器*{ }        就是一个简单的*, 代表应用于全部. 不适合于个性 ...

  7. CSS（非布局样式）

    CSS(非布局样式) 问题1.CSS样式(选择器)的优先级 1.计算权重 2.!important 3.内联样式比外嵌样式高 4.后写的优先级高 问题2.雪碧图的作用 1.减少 HTTP 请求数,提高 ...

  8. css权重问题

    权重决定了你css规则怎样被浏览器解析直到生效.“css权重关系到你的css规则是怎样显示的 权重记忆口诀.从0开始,一个行内样式+1000,一个id+100,一个属性选择器/class或者伪类+10 ...

  9. css权重计算方法浅谈

    在这之前只知道css权重的皮毛,比如说:行内权重比头部权重高,头部比外部样式权重高----工作中才知道真正理解css权重重要性.理解权重了才能写出来最优css选择器来.对后面学习less,scss有很 ...

随机推荐

  1. 盘它！！一步到位，Tensorflow 2的实战 ！！LSTM下的股票预测（附详尽代码及数据集）

    关键词:tensorflow2.LSTM.时间序列.股票预测 Tensorflow 2.0发布已经有一段时间了,各种新API的确简单易用,除了官方文档以外能够找到的学习资料也很多,但是大都没有给出实战 ...

  2. 图解 Kubernetes

    容器 在了解 Kubernetes 之前,让我们先了解一个容器. 因为如果不了解容器就没法聊容器编排. 容器就是...一个你塞入所有材料的容器. "材料"是指你的应用代码.依赖库, ...

  3. 《爬虫学习》（四）（使用lxml,bs4库以及正则表达式解析数据）

    1.XPath: XPath(XML Path Language)是一门在XML和HTML文档中查找信息的语言,可用来在XML和HTML文档中对元素和属性进行遍历. 工具:扩展商店里搜索:XPath ...

  4. mong 的 安装 和测试

    <hr>

  5. 生成链接中的全限定URL（Generating Fully Qualified URLs in Links） | 在视图中生成输出URL | 高级路由特性

    结果:<a class="myCSSClass"href="https://myserver.mydomain.com/Home/Index/MyId#myFrag ...

  6. （初学JS）JS基础——ATM机终端程序编写<1.0>

    初步学习了JS基础,为了更好地将所学知识熟练运用,我进行了银行ATM存取款机的模拟程序编写,主要通过VScode终端实现系列操作. 我的ATM程序包括6个主要功能:1.查询余额 2.存钱 3. 取钱 ...

  7. Arrays.asList()用法梳理

    Arrays.asList()用法梳理 asList概述 Arrays是java容器相关操作的工具类,asList方法将Array转换为list,是Array和List之间的桥梁. asList本质 ...

  8. mysql--->mysql查看数据库操作记录

    mysql查看数据库操作记录 MySQL的查询日志记录了所有MySQL数据库请求的信息.无论这些请求是否得到了正确的执行.默认文件名为hostname.log.默认情况下MySQL查询日志是关闭的.生 ...

  9. kali-2019.4中文乱码问题的解决

    1.安装完kali-2019.4版出现乱码问题 2.更新源,用vi编辑器,在/etc/apt/resources.list中添加清华源 #清华大学 [更新源]deb https://mirrors.t ...

  10. Spring博客专栏

    1. IOC和DI的理解 2. IOC的实现原理-反射与工厂模式 3. Spring进阶之路 4. SpringBoot配置类的使用 5. @ModelAttribute详解 6. @RequestP ...