热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

CSS变化没有得到反映.为什么?

如何解决《CSS变化没有得到反映.为什么?》经验,为你挑选了2个好方法。

我正在我的网站上工作,每当我在我的CSS文件中添加一些新行时,它只是不想使用我制作的行.

然而,他们应该没问题.

.what-new {
    padding:2em 0 4em;
    text-align:center;
}
.what-new h3 {
    font-size:4em;
    font-weight:700;
    color:#000;
    margin:0.5em 0;

仅作为一个例子.

CSS文件在一个部分工作,但从某个地方它只是停止使用我的文件.然而,它与<head > 相关联.



我的HTML代码如下(请注意,这只是代码的一部分):

    

What's new

06

of january 2015

有人知道解决方案吗?



1> Andrea Ligio..:

通常原因是以下之一:

1)您的规则未被应用

这可能是因为:

您的HTML格式不正确(但通常浏览器处理它);

你的CSS有语法错误;

在你的(声明计数顺序,后者获胜)之后加载一些其他CSS文件(具有相同/相似的规则);

其他一些具有更高特异性的 CSS规则会在页面的任何位置加载,并且胜过您想要应用的规则(有关此答案的更多信息) ;

一些其他CSS规则使用!important关键字.

您可以使用浏览器的开发人员工具进行检查, 检查CSS面板,按重要性降序列出规则的位置(从更多到不太重要).

2)您的CSS文件被缓存

这可能是因为您的服务器或浏览器正在缓存CSS资源.要强制刷新资源,您需要按一次CTRLF5而不是F5单独按下(在重新部署静态资源之后).

关于这个主题有一个众所周知的SO Q&A,并且明确指出:

CTRLF5(不是吗?)在不同浏览器中的工作方式不同 ;

请注意,虽然Ctrl + F5将导致浏览器抛出缓存并从服务器请求新缓存,但服务器可能会忽略no-cache标头并提供服务器端缓存页面.因此,如果服务器忽略no-cache标头,甚至Ctrl + F5也可能返回旧版本的页面.(从评论到接受的答案).

如果服务器忽略浏览器的请求清除缓存(有时会发生),我发现解决这个问题的最快方法是:在地址输入栏的静态资源和新闻界的URL CTRLF5页(也就是CSS文件),而不是在导入它的页面中.这种情况100%有效.

要快速执行此操作,请使用Open link in a new Tab浏览器的DevTools,或者通过打开的HTML单击CSS链接View Source.


完美答案.ctrl + F5修复了这个问题.强制重新加载资源.再次感谢.

2> brezanac..:

您基本上面临一个缓存问题,即您的浏览器不想从服务器实际请求新版本,而是使用内部浏览器缓存中缓存的版本.

简单地使用开发人员工具来禁用缓存在开发过程中会起作用,但如果您的工作流程基于经常在线放置内容,那么您最终将面临一种情况:您无法控制访问者看到的CSS代码版本(并且您不能依靠他们使用他们的开发人员工具来禁用缓存).

为了防止这样的事情发生,您应该使用一种称为"缓存清除"的技术,这实际上意味着您将向资源URL添加内容,这些内容将在每次资源文件更改时更改.基本上你的CSS URL从这里转换



这样的事情



在SO上有很多关于缓存清除的报道,因此在决定如何处理问题之前,您可能需要查看所有可用选项.

我个人最喜欢的技术是将服务器端代码与mod_rewrite结合起来以实现缓存清除.工作流程如下.

1)服务器端代码使用DOMDocument查找生成的HTML代码中的所有资源文件,如CSS,Javascript等,并附加使用filemtime检索的修改时间戳.

示例:/css/main.min.css变为/css/main.min-1422585377.css将被提供给客户端(浏览器)的代码.

2)当浏览器收到响应时,如果附加的时间戳与缓存中的时间戳不匹配,则只需将该CSS请求视为新资源(具有不同名称的资源始终被视为新请求).

3)浏览器现在向/css/main.min-1422585377.css服务器发送请求.

4)为了将所有请求重定向到main.min.css服务器上实际存在的请求,我们使用这样的简单重写规则

RewriteRule (.+)-(\d{10,}).(css|js|jpg|jpeg|png|gif)$ $1.$3 [L]

注意:我实际上更喜欢在文件名本身中包含时间戳,因此/css/main.min.css?1422585377我更喜欢使用,/css/main-1422585377.min.css因为像Squid这样的代理服务器倾向于忽略查询字符串,并且只将文件名部分视为相关.


推荐阅读
  • 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]
  • 本文介绍了OC学习笔记中的@property和@synthesize,包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]
  • React基础篇一 - JSX语法扩展与使用
    本文介绍了React基础篇一中的JSX语法扩展与使用。JSX是一种JavaScript的语法扩展,用于描述React中的用户界面。文章详细介绍了在JSX中使用表达式的方法,并给出了一个示例代码。最后,提到了JSX在编译后会被转化为普通的JavaScript对象。 ... [详细]
  • Nginx使用(server参数配置)
    本文介绍了Nginx的使用,重点讲解了server参数配置,包括端口号、主机名、根目录等内容。同时,还介绍了Nginx的反向代理功能。 ... [详细]
  • 本文介绍了使用AJAX的POST请求实现数据修改功能的方法。通过ajax-post技术,可以实现在输入某个id后,通过ajax技术调用post.jsp修改具有该id记录的姓名的值。文章还提到了AJAX的概念和作用,以及使用async参数和open()方法的注意事项。同时强调了不推荐使用async=false的情况,并解释了JavaScript等待服务器响应的机制。 ... [详细]
  • 本文介绍了使用Java实现大数乘法的分治算法,包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ... [详细]
  • 开发笔记:加密&json&StringIO模块&BytesIO模块
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了加密&json&StringIO模块&BytesIO模块相关的知识,希望对你有一定的参考价值。一、加密加密 ... [详细]
  • 本文讨论了如何优化解决hdu 1003 java题目的动态规划方法,通过分析加法规则和最大和的性质,提出了一种优化的思路。具体方法是,当从1加到n为负时,即sum(1,n)sum(n,s),可以继续加法计算。同时,还考虑了两种特殊情况:都是负数的情况和有0的情况。最后,通过使用Scanner类来获取输入数据。 ... [详细]
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • 猜字母游戏
    猜字母游戏猜字母游戏——设计数据结构猜字母游戏——设计程序结构猜字母游戏——实现字母生成方法猜字母游戏——实现字母检测方法猜字母游戏——实现主方法1猜字母游戏——设计数据结构1.1 ... [详细]
  • Html5-Canvas实现简易的抽奖转盘效果
    本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果,同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码,并展示了实现的基本效果。 ... [详细]
  • 一句话解决高并发的核心原则
    本文介绍了解决高并发的核心原则,即将用户访问请求尽量往前推,避免访问CDN、静态服务器、动态服务器、数据库和存储,从而实现高性能、高并发、高可扩展的网站架构。同时提到了Google的成功案例,以及适用于千万级别PV站和亿级PV网站的架构层次。 ... [详细]
  • 本文介绍了绕过WAF的XSS检测机制的方法,包括确定payload结构、测试和混淆。同时提出了一种构建XSS payload的方法,该payload与安全机制使用的正则表达式不匹配。通过清理用户输入、转义输出、使用文档对象模型(DOM)接收器和源、实施适当的跨域资源共享(CORS)策略和其他安全策略,可以有效阻止XSS漏洞。但是,WAF或自定义过滤器仍然被广泛使用来增加安全性。本文的方法可以绕过这种安全机制,构建与正则表达式不匹配的XSS payload。 ... [详细]
  • JavaScript和HTML之间的交互是经由过程事宜完成的。事宜:文档或浏览器窗口中发作的一些特定的交互霎时。能够运用侦听器(或处置惩罚递次来预订事宜),以便事宜发作时实行相应的 ... [详细]
  • 本文介绍了在Linux下安装Perl的步骤,并提供了一个简单的Perl程序示例。同时,还展示了运行该程序的结果。 ... [详细]
author-avatar
没有结局的相遇
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有