Utilisez un nouveau fichier CSS pour écraser les styles du site Web existant

Question

Mon site Web contient actuellement 3 fichiers CSS qui sont automatiquement inclus dans le site Web, je n'ai pas accès au code source, c'est-à-dire au fichier index.html du site Web, mais j'ai accès au CSS de mon document de site Web.

J'essaie de remplacer le fichier CSS de mon site Web par mes propres styles et de créer un nouveau fichier CSS contenant tous les styles que je souhaite remplacer.

J'ai essayé d'utiliser @import url(css4.css) et de le placer au-dessus de mon dernier fichier CSS, mais cela n'écrase pas les styles du dernier fichier CSS.

Comment puis-je atteindre cet objectif ?

<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">
<!-- Comment puis-je ajouter le code ci-dessous en utilisant uniquement CSS ? --->
<link rel="stylesheet" type="text/css" href="newCSS4.css">

Answer 1

Voici une solution intéressante dont personne n’a parlé.

Faits :

1. Vous ne pouvez pas modifier le HTML de la page - Pas de problème !

2. Vous pouvez modifier les fichiers CSS, mais le développeur peut les modifier à nouveau plus tard et supprimer toutes les modifications que vous avez apportées - Ne vous inquiétez pas.

3. Vous ne pouvez/ne voulez pas utiliser Javascript et JQuery - Pas de problème pour moi.

4. Vous pouvez ajouter plus de fichiers sur le serveur - Génial !

Faisons du piratage .htacess pour le plaisir et le profit !

Fichier .htaccess dans le répertoire racine du document :

Options +FollowSymlinks
RewriteEngine on
RewriteBase /

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

Résultat : hackedCSS3.php est servi silencieusement au lieu de css3.css à chaque demande.

Référence : http://httpd.apache.org/docs/2.2/howto/htaccess.html

fichier CSS3.php piraté :

<?php

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

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

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

Récompenses supplémentaires :

Vous pouvez étendre cette solution à ce seul .php文件中的所有三个.css fichier (mais ne servir que css3.css) et utiliser des regex intelligentes pour supprimer/modifier les CSS du développeur sans toucher à aucun fichier. Les possibilités sont fascinantes Heartbeat

.

Ajouté :

Le fichier

.htaccess doit se trouver dans le répertoire racine documents de votre site Web. C'est ici que www.example.com/index.html charge index.html.

Il peut être situé dans n'importe quel répertoire que vous spécifiez dans le fichier .htaccess. La racine du document fonctionne également. Changez

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

pour

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

Pas besoin. Traitez cette partie du code CSS comme un fichier .css. Vous n'avez pas besoin de la balise <style>.

Answer 2

En plus d'utiliser !important comme le suggèrent la plupart des réponses, il s'agit d'une question sur la spécificité CSS

peut être représenté par 4 colonnes de priorités :

---

Voici un extrait de code spécifique CSS d'un exemple complet

/*演示目的*/
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>