<!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. LeetCode 第15题-三数之和

    1. 题目 2.题目分析与思路 3.思路 1. 题目 给定一个包含 n 个整数的数组 nums,判断 nums 中是否存在三个元素 a,b,c ,使得 a + b + c = 0 ?找出所有满足条件且 ...

  2. numpy 数组的拼接

    一.数组的拼接 1.水平拼接 a.格式 np.hstack((数组1, 数组2)) # 注意: 值是元祖 # 0轴长要相同 b.例子 import numpy as np arr1 = np.aran ...

  3. objectarx 按比例分割封闭多段线

    测试结果:这个是按0.1,0.1,0.1,0.3,0.4的比例划分的. 插件描述:这个插件主要是选择一个多段线poly,设置poly的close属性为true,在poly任意一侧画一条长线line(l ...

  4. 关于C++读入数字按位取出与进制转换问题

    这一片博客我就不写具体的一个题了,只是总结一种典型问题——读入数字按位取出. 就拿数字12345举例吧. 是首先,我们要取出个位.这样取出: 12345/1=12345 12345%10=5.    ...

  5. C# LINQ查询表达式用法对应Lambda表达式

    C#编程语言非常优美,我个人还是非常赞同的.特别是在学习一段时间C#后发现确实在它的语法和美观度来说确实要比其它编程语言强一些(也可能是由于VS编译器的加持)用起来非常舒服,而且对于C#我觉得他最优美 ...

  6. Spring注解开发系列VII --- Servlet3.0

    Servlet3.0简介 Servlet 3.0 作为 Java EE 6 规范体系中一员,随着 Java EE 6 规范一起发布.该版本在前一版本(Servlet 2.5)的基础上提供了若干新特性用 ...

  7. Horizontal Pod Autoscaler（Pod水平自动伸缩）

    Horizontal Pod Autoscaler 根据观察到的CPU利用率(或在支持自定义指标的情况下,根据其他一些应用程序提供的指标)自动伸缩 replication controller, de ...

  8. Flutter 入门 --- 内部分享

    八月部门给分配的分享任务,由于项目太赶,推迟一个月. 选 Flutter 这个主题,是因为现在它慢慢流行起来了,而我却不了解,故而借此契机,上手试试. 简介 Flutter 是 Google 推出的跨 ...

  9. qt5连接sqlite数据库实例

    建库 在VS下新建qt console appication 代码: #include <iostream> #include <Qtsql/QSqlDatabase> #in ...

  10. Qt qApp

    qApp A global pointer referring to the unique application object. It is equivalent to the pointer re ...