css addClass小结

浏览数：30 / 时间：2015年06月09日

经常需要在某些判断的时候给元素增加样式。通常使用的方式是assClass

css

        .content{
            color: green;
        }

        .content .warm{
            color: purple;
        }

body

    <div class="content">
        <p>nihao</p>
        <p>nihaoma</p>
    </div>

 $(‘.content‘).addClass(‘warm‘);

此时样式为这样

----------------------------------------------------

但是如果把.warm的样式换位不冲突的css，如

.warm {
      font-size: 50px;
}

则会得到意想的结果，50px的字，green的颜色

------------------------------------------------------

如果是以下的格式，样式如图

    <style type="text/css">
        .warm {
            color: red;
        }

        .content{
            color: green;
        }

        .content-text {
            color: blue;
        }

        .content .warm{
            color: purple;
        }
  
    </style>
</head>
<body>
    <div class="content">
        <p class=‘warm‘>nihao</p>
        <p class=‘warm‘>nihaoma</p>
    </div>  
    
</body>

这样就符合10+10的层级覆盖掉10的层级原理了。

而开头不能这样的原因是，.content和.warm都给了同一个标签了，一个标签有两个class管理相同的样式，只选择前一个.content 。这并不是10+10的那种情况，10+10必须子啊不同的html层级中！！！

---------------------------------------------------

    <style type="text/css">
        .warm {
            color: red;
        }

        .content{
            color: green;
        }

        .content-text {
            color: blue;
        }

        .content .warm{
            color: purple;
        }
    </style>
</head>
<body>
    <div class="content">
        <p class=‘content-text‘>nihao</p>
        <p class=‘content-text‘>nihaoma</p>
    </div>  
    
    <script type="text/javascript">
        $(‘.content-text‘).addClass(‘warm‘);
    </script>
</body>