zoukankan      html  css  js  c++  java
  • css样式冲突怎么解决?

    一个网页有时会使用两种CSS,那发生css样式冲突要怎么解决?下面本篇文章就来给大家介绍一下发生css样式冲突的解决方法,希望对大家有所帮助。

    css冲突怎么解决?

    解决方法有很多,如果可以对html改动的话,就给你需要细化的页面元素加多一个class或者ID就行了,当然这种方法应该不是你想要的。那么接下来是不改变HTML的情况下,直接用css的方法来实现你想要的效果。

    方法一:细化选择符

    假如全局是这样来定义一个元素的样式的:.abc {background:#000},同时这个class为abc的元素是隶属于某个元素的,比如下面这样的html代码结构

    <div>
    <div></div>
    </div>

    那么在细化css里面,只需要在.abc前面加多一个父元素的选择符就行了:

    .container .abc {background:#fff}

    这样.container .abc的优先级就大于了.abc,自然细化css里面的background设置也就不会被全局CSS覆盖了~~

    方法二:提升样式的优先级

    这种方法个人不太推荐,相对而言会简单粗暴一些。同样是上面的例子,在细化CSS里面,只要在样式后面加一个!important,例如这样:

    .abc {background:#fff !improtant;}

    这个样式的优先级就会默认提升到顶级,全局样式就无法影响到它了。

    方法三:改变两个样式的加载顺序

    这种方法比较简单,就是只要把细化css加载在全局css之后就行了,这样后面的样式就会自动覆盖前面的样式。不过如果你的html里面这两个样式表的加载顺序是先细化后全局的话,就要稍微调整一下代码才行。

  • 相关阅读:
    【坑】提答题
    Google Code Jam 2014 Round2
    湖北省队互测Week1
    [xyz模拟题]动态维护树的直径
    音乐会的等待【单调栈】
    51nod1202【DP-树状数组维护】
    51nod1113【矩阵快速幂】
    51nod1255【贪心-栈的应用】
    Lightoj1059【最小生成树】
    SPOJ IAPCR2F 【并查集】
  • 原文地址:https://www.cnblogs.com/ypppt/p/12882612.html
Copyright © 2011-2022 走看看