开发者

CSS specificity issue for div, span, a, etc

开发者 https://www.devze.com 2023-04-10 15:15 出处:网络
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 over

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/

0

精彩评论

暂无评论...
验证码 换一张
取 消