Use a new CSS file to overwrite the existing website's styles

Question

My website currently has 3 CSS files that are automatically included as part of the website, I do not have access to the source code, i.e. the index.html file of the website, but I do have access to the CSS of my website document.

I'm trying to override my website's CSS file with my own styles and create a new CSS file that contains all the styles I want to override.

I tried using @import url(css4.css) and placing it on top of my last CSS file but this does not overwrite the last CSS file's styles .

How do I achieve this goal?

<link rel="stylesheet" type="text/css" href="currentCSS1.css">
<link rel="stylesheet" type="text/css" href="currentCSS2.css">
<link rel="stylesheet" type="text/css" href="currentCSS3.css">
<!-- How can I add the code below using only CSS? -->
<link rel="stylesheet" type="text/css" href="newCSS4.css">

Answer 1

Here's an interesting solution that no one has mentioned.

fact:

1. You cannot modify the HTML of the page - No problem!

2. You can modify CSS files, but the developer may modify them again later and remove any changes you made - Don't worry.

3. You can't/don't want to use Javascript and JQuery - No problem for me.

4. You can add more files to the server - Great!

Let's do some .htacess hacking for fun and profit!

.htaccess file in the document root directory:

Options +FollowSymlinks
RewriteEngine on
RewriteBase /

RewriteRule ^(.*?)css3.css(.*?) hackedCSS3.php [L]

Result: hackedCSS3.php will be served silently every time it is requested, instead of css3.css.

Reference: http://httpd.apache.org/docs/2.2/howto/htaccess.html

hackedCSS3.php file:

<?php

// 发送正确的头信息！
header("Content-type: text/css; charset: UTF-8");

// 输出css3.css文件
echo file_get_contents("css3.css");
?>

// 在这里添加您的CSS，使用任何有趣的!important或覆盖技巧（即：特定性）
div { ... }

Additional rewards:

You can extend this solution to all three .css files in this one .php file (but only css3.css, And use clever regex to remove/modify those developers' CSS without touching any files. The possibilities are exciting.

Replenish:

The

.htaccess file should be located in the document root directory of your website. This is where www.example.com/index.html loads index.html.

It can be located in any directory you specify in the .htaccess file. The document root works too. Change

RewriteRule ^(.*?)css3.css(.*?) hackedCSS3.php [L]

for

RewriteRule ^(.*?)css3.css(.*?) /folders/you/want/hackedCSS3.php [L]

unnecessary. Treat this part of the CSS code as a .css file. You don't need the <style> tag.

Answer 2

In addition to using the !important suggested by most answers, this is a question about CSS specificity

can be represented by 4 columns of priorities:

---

This is a complete example of CSS-specific code snippets

/*演示目的*/
body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}

/*CSS特异性*/

/* 特异性：0/1/0/0 */
#id {
  background-color: green
}

/* 特异性：0/0/1/0 */
.class {
  background-color: yellow 
}

/* 特异性：0/0/0/1 */
section {
  background-color: blue 
}
  
/* ------------ 覆盖内联样式 ----------- */

/*要覆盖内联样式，我们现在使用!important*/

/* 特异性  0/0/1/0 */

.inline {
  background-color: purple !IMPORTANT /*将变为紫色-最终结果*/ 
}

<article>
  <div id="id">
    <div class="class">
      <section>
        <div class="inline" style="background-color:red">
          <!--特异性 1/0/0/0 - 被"!important"覆盖-->
        </div>
      </section>
    </div>
  </div>
</article>