<!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. Scrapy的基本使用

    爬取:http://quotes.toscrape.com 单页面 # -*- coding: utf-8 -*- import scrapy class QuoteSpider(scrapy.Spi ...

  2. Serilog高级玩法之用Serilog记录所选终结点附加属性

    这是该系列的第二篇文章:在ASP.NET Core 3.0中使用Serilog.AspNetCore. 第1部分-使用Serilog RequestLogging来简化ASP.NET Core的日志输 ...

  3. 替代 Hystrix，Spring Cloud Alibaba Sentinel 快速入门

    提起 Spring Cloud 的限流降级组件,一般首先想到的是 Netflix 的 Hystrix. 不过就在2018年底,Netflix 宣布不再积极开发 Hystrix,该项目将处于维护模式.官 ...

  4. generic

    是什么 算法实现时保有待定类型的参数. 为什么 一份代码用于多个算法(当算法中只数个类型不同的时候) 可重新性 很多常用算法和容器数据结构都可以type-generic的方式实现 why not 许多 ...

  5. [ZJOI2007]报表统计（splay，堆）

    [ZJOI2007]报表统计(luogu) Description 题目描述 Q的妈妈是一个出纳,经常需要做一些统计报表的工作.今天是妈妈的生日,小Q希望可以帮妈妈分担一些工作,作为她的生日礼物之一. ...

  6. halfcheetch win10

    HalfCheetah win10配置 1.使用Anaconda Prompt切到程序目录,执行pip install -r requirements.txt 补充说明: 使用pip与conda命令都 ...

  7. XGBoost原理学习总结

    XGBoost原理学习总结 前言 ​ XGBoost是一个上限提别高的机器学习算法,和Adaboost.GBDT等都属于Boosting类集成算法.虽然现在深度学习算法大行其道,但很多数据量往往没有太 ...

  8. VLC for CentOS7

    https://blog.csdn.net/qiuyoujie/article/details/78486947 http://elearning.wsldp.com/pcmagazine/insta ...

  9. Shell考题初级篇

    将当前目录下大于10K的文件转移到/tmp目录下 find . -type f -size +10k -exec mv {} /tmp \; 编写一个shell,判断用户输入的文件是否是一个字符设备文 ...

  10. Centos 7 最小化时间服务部署配置

    基本原理 Centos 7 我所了解有两种时间服务,NTPD与chronyd:两者对Centos 7 的支持都很好,有对chrony非常夸赞的,不过我这里只讲ntpd:有对chrony有想法的可以自行 ...