How do I get my @import stylesheet to override the main stylesheet?

后端未结

关注

 5  905

I imported another stylesheet using @import in the main style sheet file. I would like the changes I have made in the @import stylesheet to override th

相关标签:

5条回答

刺人心

2021-02-05 18:59
This solution working perfect for me.

Make copy of your main.css and rename it to style.css. In main.css delete all and past :
```
@import url("style.css");
@import url("style-override.css");
```
Thats all.
0 讨论(0)
发布评论:

提交评论
- 加载中...
孤街浪徒

2021-02-05 19:00
You can also use more specific class name - for example if you want to change
```
div#sample {
max-width: 75%;
}
```
on new css use
```
body div#sample {
max-width: 75%;
}
```
Just keep in mind, that overqualified selectors are not the best idea ;)
0 讨论(0)
发布评论:

提交评论
- 加载中...
醉话见心

2021-02-05 19:03

If your second stylesheet uses the same selectors, then it should override the first without any problem.

CSS has a very strict order of precedence for determining which one should be used, but if all else is equal and two styles have exactly the same precedence level, then it will use the one which was specified last. This allows you to override a style simply by repeating the same selector later on.

The only exception to this is if the first style was specified as !important. In this case, it is much harder to override it. Even specifying another style as !important may not always work (I've seen cases where it worked in some browsers but not others).

So if the previous stylesheet used !important then you may have problems overriding it. But if not, it should be fairly simple.

0 讨论(0)
发布评论:

提交评论
- 加载中...
别那么骄傲

2021-02-05 19:05

@import the second stylesheet at the end of the first.

You're confusing !important and @import

0 讨论(0)
发布评论:

提交评论
- 加载中...
走了就别回头了

2021-02-05 19:08
If your goal is to override styles by importing another stylesheet, you should use the order of precedence.
```
<head>
    <title>Title</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link href="style-override.css" rel="stylesheet" type="text/css" />
</head>
```
Here the style.css is the original and style-override.css would contain your new custom css. These styles will override the styles from style.css. This means you won't need to use !important because the style is overwritten.

Avoid !important whenever you can.

To do @import
```
<style type="text/css">
  @import url("style.css");
  @import url("style-override.css");
</style> 
```
Also as a side note if you would rather remove all styles from the page, use a css reset.
```
<style type="text/css">
  @import url("style.css");
  @import url("reset.css");
  @import url("style-override.css");
</style> 
```
Check out a CSS reset at http://meyerweb.com/eric/tools/css/reset/ and add it to reset.css.
0 讨论(0)
发布评论:

提交评论
- 加载中...