Use a new CSS file to overwrite the existing website's styles
P粉504920992
P粉504920992 2023-08-23 09:15:29
0
2
549
<p>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. </p> <p>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. </p> <p>I tried using <code>@import url(css4.css)</code> and placing it on top of my last CSS file but this does not overwrite the last CSS file's styles . </p> <p>How do I achieve this goal? </p> <pre class="brush:php;toolbar:false;"><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"></pre> <p><br /></p>
P粉504920992
P粉504920992

reply all(2)
P粉536532781

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.

P粉022140576

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>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template