<!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. eclipse git 解决冲突 解决 mergetool 不能使用问题

    eclipse git 解决冲突 解决 mergetool 不能使用问题 本地代码 远程代码 第一步 --> 同步远程资源库,检查是否存在冲突 这里有冲突出现 第二步 --> 如果存在冲突 ...

  2. SVN打patch，某Java文件提示svn:mime-type = application/octet-stream的问题

    在使用SVN合版本时发现某文件有冲突,正常冲突文件是可以编辑修改的,但是该文件无法编辑,我只好选择后续修改选项,问题好诡异啊!!!在解决完其他冲突后,我选择了在eclipse开发工具内将修改的代码调整 ...

  3. LeetCode 第20题--括号匹配

    1. 题目 2.题目分析与思路 3.代码 1. 题目 给定一个只包括 '(',')','{','}','[',']' 的字符串,判断字符串是否有效. 有效字符串需满足: 左括号必须用相同类型的右括号闭 ...

  4. mysql使用唯一索引避免插入重复数据

    使用MySQL 索引防止一个表中的一列或者多列产生重复值 一:介绍MYSQL唯一索引 如果要强烈使一列或多列具有唯一性,通常使用PRIMARY KEY约束. 但是,每个表只能有一个主键. 因此,如果使 ...

  5. 如何修改win7文件夹的显示方式为详细信息

    1.首先对着空白处,鼠标右键单击,然后点击“排列方式” 选一个 还有 你还可以点击“查看” 选择图标大小.详细信息.平铺.列表 等2.点击我的电脑左上角的 组织 按钮 随后选择“文件夹和搜索选项” 再 ...

  6. node js 爬啊爬 记录 向 Scott 致敬 不要问为什么

    更优雅的异步编程: 定向爬取 :http://www.010xww.com/list/travel.htm 上代码: 打印一下http . 嗯 http 模块加载没问题 获取一个 文章列表: 终于把人 ...

  7. C#反射与特性(四)：实例化类型

    目录 1,实例化类型 1.1 Activator.CreateInstance() 1.2 ConstructorInfo.Invoke() 2,实例化委托 3,实例化泛型类型 3.1 实例化泛型 3 ...

  8. Zabbix添加SNMP自定义监控项OID出现“No Such Instance currently exists at this OID”

    原因:zabbix 是用snmpget来获取指定的OID数据,snmpwalk是遍历某个OID下的数据. 所以一定要用snmpget来验证某个OID是否正确. snmptranslate 获取的OID ...

  9. Redhat6.7 切换Centos yum源

    转自:http://inlhx.iteye.com/blog/2336729 RedHat 更换Yum源 1.检查yum包 rpm -qa |grep yum 2.删除自带包 rpm -aq | gr ...

  10. Shell常用命令之主机检测(ping)

    主机检测命令ping 向网络主机发送ICMP回传请求 常用选项 -A:洪水攻击选项,启用此功能能在短时间之内发送大量的ping包 -b:开启ping网桥模式,默认不允许ping网桥 -c:设置发送多少 ...