I want to override another style sheet and set the float for 开发者_运维知识库all elements to none. If I use 'div, span, a' as the selectors or even 'body div, body span, body a', it doesn't override the previous class selector. I could use !important but this isnt great for obvious reasons.
.class {
float: left;
}
/* my overide */
div, span, a {
float: none;
}
Note- in the code ive only shown the class of 'class', but actaully their are many classes and id's.
Is there a way to do this without using !important? The reason im doing this is im mobile optimizing my site with media queries. I need to remove absolute positioning, floats, etc for all elements, but then i will want to add some of these styles to specific elements. Thanks
As I wrote in my comment above:
Using the * selector is generally ill-advised. Selectors focus on the key selector first (the right most selector) and so using the * selector means that the browser must find all elements on the page. This is a huge performance issue.
You can read more in this answer: (why) is the CSS star selector considered harmful?
Rather than using the *
selector as you have, I'd stick with targetting the elements you want to affect, specifically.
Chances are, there will only be a few types of elements in your page that are floating.
These are usually some divs, perhaps some images, a list or two?
div, img, ul, ol{
float:none;
}
If there's a few more you can include them also.
@jdin; for overide the .class
float
just write like this:
div.class, span.class, a.class {
float: none;
}
EDIT:
Define an ID
in your body tag like this
HTML:
<body id="home">
<div>Tag</div>
<span class="class">Class</span>
<div id="id">ID</div>
</body>
CSS:
body#home *{background:pink;border:1px solid #000}
Check this example http://jsfiddle.net/sandeep/D7Sg6/2/
精彩评论