使用新的CSS文件覆盖当前网站的CSS

Question

我的网站目前有3个CSS文件自动包含在网站的一部分,我无法访问网站的源,即index.html,但我可以访问我的网站的CSS文件.

我试图用我自己的风格覆盖我的网站CSS文件,并创建一个新的CSS文件,其中包含我想在我的网站上覆盖的所有样式.

我已经尝试过使用@import url(css4.css),我把它放在我最后一个CSS文件的顶部但是不会覆盖最后一个CSS文件的样式.

我怎样才能做到这一点？

<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 to add this below just by using CSS? -->
<link rel="stylesheet" type="text/css" href="newCSS4.css"> 

Answer 1

除了使用!important大多数答案建议你使用,这是CSS特异性的问题

这个概念

特定性是浏览器决定哪些属性值与元素最相关并且可以应用的方法.特异性仅基于由不同种类的选择器组成的匹配规则.

它是如何计算的？

在每个选择器类型的计数的串联上计算特异性.它是应用于相应匹配表达式的权重.

在特异性相等的情况下,CSS中的最新声明应用于元素.

一些经验法则

• 永远不要在网站范围内使用!important.
• 仅在页面特定的css上使用!important来覆盖站点范围或外来的css(例如来自ExtJs或YUI).
• 在编写插件/ mashup时,切勿使用!important.
• 在考虑之前总是寻找一种使用特异性的方法!重要

可以用4列优先级表示:

inline = 1 | 0 | 0 | 0

id = 0 | 1 | 0 | 0

class = 0 | 0 | 1 | 0

element = 0 | 0 | 0 | 1

从左到右,最高数字优先.

这是一个包含CSS特性的完整示例的片段

/*demo purposes*/
body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}

/*CSS Specificity */

/* SPECIFICITY: 0/1/0/0 */
#id {
  background-color: green
}

/* SPECIFICITY: 0/0/1/0 */
.class {
  background-color: yellow 
}

/* SPECIFICITY: 0/0/0/1 */
section {
  background-color: blue 
}
  
/* ------------ override inline styles ----------- */

/*to override inline styles we  now use !important */

/* SPECIFICITY  0/0/1/0 */

.inline {
  background-color: purple !IMPORTANT /*going to be purple - final result */ 
}

<article>
  <div id="id">
    <div class="class">
      <section>
        <div class="inline" style="background-color:red">
          <!--SPECIFICITY 1/0/0/0 - overridden by "!important -->
        </div>
      </section>
    </div>
  </div>
</article>

现在,这是一步一步的完整代码段

ID:绿色

/*demo purposes*/
body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}

/*CSS Specificity */

/* SPECIFICITY 0/1/0/0 */
#id {
  background-color: green
}
   

<article>
  <div id="id">
    <div class="class">
      <section>
        <div>             
        </div>
      </section>
    </div>
  </div>
</article>

类别:黄色

/*demo purposes*/
body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}

/*CSS Specificity */

/* SPECIFICITY  0/0/1/0 */
.class {
  background-color: yellow
}

<article>
  <div id="id">
    <div class="class">
      <section>
        <div>
        </div>
      </section>
    </div>
  </div>
</article>

元素:蓝色

/*demo purposes*/
body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}

/*CSS Specificity */

/* SPECIFICITY  0/0/0/1 */
section {
  background-color: blue
}

<article>
  <div id="id">
    <div class="class">
      <section>
        <div>
        </div>
      </section>
    </div>
  </div>
</article>

INLINE STYLE:RED

/*demo purposes*/
body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}

 

<article>
  <div id="id">
    <div class="class">
      <section>
        <div style="background-color:red">
        <!--SPECIFICITY 1/0/0/0 -->
        </div>
      </section>
    </div>
  </div>
</article>

OVERRIDDEN INLINE STYLE:紫色

/*demo purposes*/
body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}
/*CSS Specificity */

/* SPECIFICITY  1/0/0/1 */

section > div {
  background-color: purple !IMPORTANT
}

 

<article>
  <div id="id">
    <div class="class">
      <section>
        <div style="background-color:red">
        <!--SPECIFICITY 1/0/0/0 -->
        </div>
      </section>
    </div>
  </div>
</article>

你可以计算你的元素(S)的特异性这里

注意:

必须阅读这个主题

• 继承和级联
• CSS特异性
• 关于CSS特异性的细节

Answer 2

这是一个没有人提到过的有趣解决方案.

事实:

1. 你根本无法修改页面的HTML - 没问题!

2. 您可以修改CSS文件,但开发人员可能会在以后再次修改它们并删除您所做的任何更改 - 不用担心.

3. 你不能/不想使用Javascript和JQuery - 我很好.

4. 您可以在服务器上添加更多文件 - 非常好!

让我们做一些.htacess黑客的乐趣和利润!

文档根.htaccess文件:

Options +FollowSymlinks
RewriteEngine on
RewriteBase /

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

结果:hackedCSS3.php在每个请求上都是静默服务而不是css3.css.

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

hackedCSS3.php文件:

<?php

// Send the right header information!
header("Content-type: text/css; charset: UTF-8");

// Output the css3.css file
echo file_get_contents("css3.css");
?>

// Add your CSS here with any neat !important or override tricks (read: specificity)
div { ... }

奖金:

你可以扩展这个解决方案,.css在这个文件中包含所有三个.php文件(但是只服务css3.css并将css1.css和css2.css发送到带有.htaccess的黑洞),并使用聪明的正则表达式来删除/修改那些开发人员的CSS而不触及他们的任何文件.可能性很诱人.

附录:

你能更具体地说明这些文件的包含位置吗？

.htaccess文件应位于网站的文档根目录中.这是www.example.com/index.html加载index.html的地方

hackedCSS3.php文件是否应该与其他css文件位于同一目录中？

它可以位于.htaccess文件中指定的任何目录中.文档根目录很好.更改

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

至

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

我们的CSS内容(你在哪里指定//在这里添加你的CSS ...)应该在html样式标签内吗？

不.将该部分中的CSS代码视为.css文件.你不需要<style>标签.

Answer 3

要仅使用CSS,最好的方法是使用Chrome或FireFox的开发人员工具,并找到要覆盖的各种样式.

对于您需要调整的每种样式,然后使用!important修饰符.

.newClass {
  color:red !important;
}

另一种方法是编写唯一的css类名,并!important在需要时再次使用.这里的真正诀窍是特异性.如果标识符更具体,则将应用该规则.

6.4.1级联顺序

6.4.1.4最后,按指定顺序排序:如果两个声明具有相同的权重,来源和特异性,则后者指定获胜.导入样式表中的声明被认为是在样式表本身中的任何声明之前.

<a class="my-most-awesome-link its-really-cool">Most awesome link</a>

.my-most-awesome-link.its-really-cool {
  text-decoration:none !important;
  color:red !important;
}

如果你绝望,你可以使用javascript删除不需要的CSS.

有关工作示例,请参阅此JSBin.

我找到了这个有趣的技术

<script>
function removejscssfile(filename, filetype){
    var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none"; //determine element type to create nodelist from
    var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none"; //determine corresponding attribute to test for
    var allsuspects=document.getElementsByTagName(targetelement);
    for (var i=allsuspects.length; i>=0; i--){ //search backwards within nodelist for matching elements to remove
      if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1){
          allsuspects[i].parentNode.removeChild(allsuspects[i]); //remove element by calling parentNode.removeChild()
      }
    }
}

removejscssfile("css1.css", "css") ;
removejscssfile("css2.css", "css") ;
removejscssfile("css3.css", "css") ;
</script>