我的网站目前有3个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">
答案 0 :(得分：41)
除了使用大多数答案建议您使用的!important之外，还需要 CSS specificity
概念
特定性是浏览器决定哪个属性的方法 值与元素最相关并且可以应用。 特异性仅基于由组成的匹配规则 选择不同的种类。
如何计算？
特异性是根据计数的连续计算的 每个选择器类型。它是一个适用于的重量 相应的匹配表达式。
在特异性相等的情况下，CSS中的最新声明将应用于元素。
一些经验法则
- 从不在网站范围内使用！important。
- 仅在页面特定的css上使用！important来覆盖网站范围或外部css（例如来自ExtJs或YUI）。
- 从不使用！在您编写插件/ mashup时非常重要。
- 始终在考虑！important
之前，寻找一种使用特异性的方法
可以由4列优先级表示：
内联 = 1 | 0 | 0 | 0
id = 0 | 1 | 0 | 0
类 = 0 | 0 | 1 | 0
元素 = 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/*going to be green - overridden by style yellow */
}
/* SPECIFICITY 0/0/1/0 */
.class {
background-color: yellow /*going to be yellow - overridden by style blue */
}
/* SPECIFICITY 0/0/0/1 */
section {
background-color: blue /*going to be blue - overridden by style red */
}
/* ------------ just to remove inline demo ----------- */
/*now remove background for inline elements we should
use !important and a parent in order to make it more specific
/* SPECIFICITY 1/0/0/1 */
section > div {
background-color: purple !IMPORTANT /*going to be purple - final result */
}<article>
<div id="id">
<div class="class">
<section>
<div style="background-color:red">
<!--SPECIFICITY 1/0/0/0 - overridden by style purple -->
</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/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>
/*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>
<小时/>
/*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>
必须阅读此主题
答案 1 :(得分：7)
这是一个没有人提到过的有趣解决方案。
<强>事实：
您根本无法修改页面的HTML - 没问题！
您可以修改CSS文件，但开发人员可以修改它们 稍后再删除您所做的任何更改 - 不用担心。
你不能/不想使用Javascript和JQuery - 很好。
您可以在服务器上添加更多文件 - 优秀！
让我们做一些.htacess黑客的乐趣和利润！
Options +FollowSymlinks
RewriteEngine on
RewriteBase /
RewriteRule ^(.*?)css3.css(.*?) $1hackedCSS3.php$2 [L]
结果： hackedCSS3.php 在每次请求时都是静默服务而不是 css3.css 。
参考：http://httpd.apache.org/docs/2.2/howto/htaccess.html
<?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>代码。
答案 2 :(得分：6)
要仅使用CSS，最好的方法是使用Chrome或FireFox的开发人员工具，找到要覆盖的各种样式。
对于您需要调整的每种样式，然后使用!important修饰符。
.newClass {
color:red !important;
}
另一种方法是编写唯一的css类名，如果需要，再次使用!important。这里的真正诀窍是特异性。如果标识符更具体，则将应用该规则。
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。
I found this interesting technique
<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>
答案 3 :(得分：3)
在新的CSS文件中，将!important添加到代码块中，例如：
如果你在css1.css上有这个：
h2{
color:#000;
}
在css4.css中放置相同的元素，但使用!important，如下所示;
h2{
color:#ccc !important;
}
因此，!important将强制这种风格无论如何都是为其应用的元素设置的样式。
答案 4 :(得分：3)
编写一个新的css，并使用元素的id而不是class。也可以在css中使用！important。
答案 5 :(得分：3)
在您现有的css页面中使用@import url('css4.css')。然后使用特异性突出显示您的新代码：
Html：
<ul class='ulclass'>
<li class='liclass'>
<a class='aclass>The text</a>
</li>
</ul>
css1.css：
.aclass{
color : red;
}
css4.css：
ul.ulclass li.liclass a.aclass{
color: green;
}
然后，您的green元素
a颜色
答案 6 :(得分：2)
此处的一些解决方案建议使用@import包含您的css4.css文件，然后修改其中的选择器以获得更高的特异性或使用!important声明，但还有另一种方式。
将css4.css的全部内容粘贴到css3.css的末尾。通过这种方式，您不必依赖!important或特异性，因为级联继承将在文件末尾采用您的规则，如果它们具有相同的特异性。
使用此方法，您将牺牲模块化以便于实施。
粘贴示例，依赖于级联：
/* Contents of css3.css */
.mycooldiv {
font: bold 1.2em sans-serif;
color: tomato;
}
/* Pasted contents of css4.css */
.mycooldiv {
color: lime;
}<div class="mycooldiv">Hello World</div>
但是，如果您不希望在html结束时将css4.css添加到每个规则的开头，那么就可以轻松创建更高的特异性。 css3.css。最好在!important处添加{。}}。
导入示例，依赖更高的特异性：
/* @import of css4.css with greater specificity */
html .mycooldiv {
color: lime;
}
/* Contents of css3.css */
.mycooldiv {
font: bold 1.2em sans-serif;
color: tomato;
}<div class="mycooldiv">Hello World</div>
答案 7 :(得分：1)
我想我有一个答案。我试图实现这一目标的方式是：
1）假设我的css3是列表中的最后一个CSS，我在css4中进行了所有更改。我已经制作了一份css3，并将其命名为＆＃34; css3-Original.css ＆＃34;并将我的css4添加到同一个文件夹中。然后我创建了另一个名为＆＃34; css3.css ＆＃34;的css文件。 （因为这是从列表中取出的最后一个）并首先添加了我的原始css3的导入，然后是我的重写css4.css文件，如下所示：
css3.css （新的）
@import url("css3-Original.css")
@import url("css4.css")
这是我发现它的最佳方式。这种方式虽然我知道我的css3.css文件会在更新时发生变化，但我知道如何能够非常轻松快速地替换它。我已经在我的css4.css中使用了！important（如果需要），但基本上因为它是最后一个css文件，它使用该样式与之前的任何样式相比（除非它们是重要的）。
感谢你们的建议。我终于设法找到了解决方案。
答案 8 :(得分：0)
如果我理解您正确提问，将@import url(css4.css)添加到css3.css的顶部会将您的样式表导入css3.css。但是你的风格被css3.css中的风格所覆盖。这是因为Cascading Order和Specificity。为了使用css4.css样式，您的选择器必须具有比您尝试覆盖的css.3.css中的选择器更高的特异性。
示例：<h1>标记将显示为红色。
body h1 { //this is more specific
color: blue;
}
h1 { //this is less specific
color: red;
}
但是，每当开发人员更新@import url(css4.css)文件时，您的css3.css代码行将被删除，这不是＆＃34; bullet-证明解决方案＆＃34;
您是否有能力向网站添加任何JavaScript？如果是这样，您可以使用以下解决方案
<强>的jQuery
$('head').append('<link rel="stylesheet" type="text/css" href="css4.css">');
<强>的Javascript
var head = document.head
, link = document.createElement('link')
link.type = 'text/css'
link.rel = 'stylesheet'
link.href = 'css4.css'
head.appendChild(link)
答案 9 :(得分：0)
不幸的是，我必须同意 phari 。
引用：
1）您根本无法修改页面的HTML，因此无法包含其他CSS文件。 2）您可以修改CSS文件，但开发人员可能会在以后再次修改它们并删除您所做的任何更改。因此，您无法永久修改CSS文件。 3）你不能/不想使用Javascript和JQuery）。如果所有这些都是真的，那么你的问题就无法解决。
phari 于 3月26日14:29发表评论
让我分解一下。我会尽力解释为什么没有解决办法（如果我对这些选项有误，请纠正我）;
选项1：使用jQuery或Javascript。
你根本无法修改页面的HTML！你不想使用jquery或javascript。
这意味着此页面上提到的涉及jquery或javascript的问题的所有答案都将被忽略。 这并不意味着此页面上给出的答案是错误的。在你的情况下，它是不可能的。
选项2：@import url(css4.css);
您的网站有3个css文件自动包含在网站的一部分，但不幸的是，您不要可以访问 ANY 这些css文件。您不能将这段代码放在css3.css或任何这些文件中。
您可以修改CSS文件，但开发人员可以稍后再次修改它们并删除您所做的任何更改，这意味着也可以删除@import url(css4.css);。
使用@import url(css4.css);也是完全没用的。您必须将@import url(css4.css);放在css3.css的末尾，但这不会起作用，因为 @import规则必须始终位于文档的第一位。如果我没有误会ilia（3月23日9:42发表评论）意味着代码可以放在文件的任何位置。 @import url(css4.css);必须位于顶部。链接ilia提供为＆＃34;证明＆＃34;还指定将要求放在开头。检查下面的两个链接。
更多信息，请访问http://webdesign.about.com/cs/css/qt/tipcssatimport.htm或https://developer.mozilla.org/en/docs/Web/CSS/@import#Specifications。
备选方案2也被忽视。
我不认为可能有另一种方法可以做你想做的事情。 因此，您的问题无法解决。
答案 10 :(得分：0)
对于重复的CSS定义，最后一个定义将具有优先权。
如果在“自动包含的3个css文件”之后实际引用了添加的css4.css文件，则css4.css文件的定义应该覆盖这些其他文件中的先前重复定义。
如果您没有看到预期的结果，请使用浏览器的“查看源”选项确认引用CSS文件的顺序。还可以使用Chrome浏览器的“开发人员工具”或Firefox浏览器的“Firebug”插件来了解浏览器如何解释CSS定义以产生您不期望的结果。这些工具可以提供您的问题的洞察力。
答案 11 :(得分：-1)
你可以覆盖你可以使用的css文件中的文本，你可以从以前的css文件中找到你可以复制的代码，你可以添加新代码，刷新你的网站所需的结果