Try it Live

<!DOCTYPE html>
<html>
 <head>
 <style>
  .main-parent {
    padding:10px;
    color:green;
    width:80%;
    border:8px solid green;
  }
 
  .left-float {
    width:150px;
    background:yellow;
    color:blue;
    height:50px;
    border:3px solid blue;   
    float:left;
    padding-left: 5px;
    margin:0 5px;
  }

@media all and (min-width:540px) {
     .main-parent {
       color:red;
       font-size:22px;
       background:black;
       border:4px solid tomato;
     }
   }
 </style>
 </head>
 <body>
   <h3>Here, the media all is applied to the main class, but it will not override the existing style like color, background-color or borders of the child</h3>
   <Strong>Note:</strong> This will not override existing style of the childs. 
 <div class="main-parent">
   <p>
     <span class="left-float" >
       The float is Left.
     </span>
Resize the Browser to understand this. For all device types which has a size greater than 540px, the color of the text will turn to red and the font-size will increase to 22px. Backgroud color and border of the main div will also change.
   </p>
 </div>
 </body>
</html>