<!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. Django设置 DEBUG=False后静态文件无法加载解决

    前段时间调试一直是在Debug=True先运行的,没有什么问题.今天关闭了Debug后,出现了一个问题.就是静态文件找不到了,「img.css.js」都提示404,无法准确的访问 static 静态文 ...

  2. 菜鸟学习Fabric源码学习 — kafka共识机制

    Fabric 1.4源码分析 kafka共识机制 本文档主要介绍kafka共识机制流程.在查看文档之前可以先阅览raft共识流程以及orderer服务启动流程. 1. kafka 简介 Kafka是最 ...

  3. 用ModelAndView返回视图结果返回的是对应RequestMapping拼接的路径

    今天,遇到一个贼坑的问题,就是我明明可以将逻辑视图名视图存入ModelAndView,结果返回的页面信息是RequestMapping拼接的视图解析路径,最后经过检查多遍代码,发现原来是ModelAn ...

  4. Java入门 - 导读

    原文地址:http://www.work100.net/training/java 更多教程:光束云 - 免费课程 Java入门 Java 是由 Sun Microsystems 公司于1995年5月 ...

  5. [bzoj4567] [loj#2012] [SCOI2016] 背单词

    Description \(Lweb\) 面对如山的英语单词,陷入了深深的沉思,「我怎么样才能快点学完,然后去玩三国杀呢?」.这时候睿智的凤老师从远处飘来,他送给了 \(Lweb\) 一本计划册和一大 ...

  6. 「 扫盲 」Web服务器和应用服务器的区别

    我们经常使用apache,tomcat,nginx,jetty等服务器,但并不清楚它们间的区别,它们中,哪些是Web服务器,哪些是应用服务器?今天就来告诉你 Web服务器 理解WEB服务器,首先你要理 ...

  7. 机器学习-向量机SVM

    一.介绍 二.编程 1.支持向量机的核函数 import numpy as npimport matplotlib.pyplot as pltfrom sklearn import svmfrom s ...

  8. Ubuntu学习之路2

    由于数据越来越多,学习的也稍微多了点,故将一步一步学习到的命令和快捷键继续到这篇博客. 1. 查看隐藏文件和文件夹 Ctrl+H 2. 打开搜索管理器 Alt+F2 3. 查看系统内存 free -h ...

  9. java反射API

    反射主要对象 Class Constructor Field Method API-Class 获取Class对象 Object.getClass() className.class Class.fo ...

  10. spring @Scheduled注解 定时任务 详解

    scheduled的使用注解的方式进行调度 先要配置spring.xml xmlns:task="http://www.springframework.org/schema/task&quo ...