CSS文件未在浏览器中更新答案

【问题标题】：CSS file not updating in browserCSS文件未在浏览器中更新
【发布时间】：2019-09-21 11:29:10
【问题描述】：

只是在学习基本的编码技能，当我在 css 文件中进行更改时，这些更改不会显示在我的浏览器上。

这是我的 index.html 代码：

<html>
   <head>
       <link ref="stylesheet" href="css/style.css?v=1.1">
   </head>

<body>
   <div class="ios-switch">
    <div class="switch-body"> 
        <div class="toggle"></div>
    </div>
    <label>iOS Switch Practice</label> 
    <input type="checkbox" name="check box">
</div>
    </body>
</html>

这是我的 style.css 文件：

*
{
   margin:0;
   padding:0;
}

.ios-switch{`enter code here`
    display: flex; 
    flex-direction: row; 
    align-items: center;
    margin: 10px 0; 
}

.ios-switch .switch-body{
    background-color: lightgray;
    border: solid 1px gray; 
    width: 96px;
    border-radius: 999px; 
}


.ios-switch .switch-body .toggle{
    width:48px; 
    height:48px;
    background-color: white;
    border-radius: 50%; 
}

最后，当我在网上查找这个问题时，有人建议去谷歌浏览器中的开发者工具，我注意到有这个错误消息：

VM25:1047 WebSocket 连接到“ws://localhost:8125/”失败：连接建立错误：net::ERR_CONNECTION_REFUSED

非常感谢您抽出宝贵时间。

【问题讨论】：

您是否清除了缓存或对页面进行了硬刷新？ Ctrl+F5
如果这确实是一个缓存问题，您已经有了绕过它的机制，只需更改样式查询字符串中v= 之后的值。但是，看起来好像您的 localhost Web 服务器出现故障。这是一种解决方案，但取决于您的服务器软件：stackoverflow.com/questions/32190881/…
@abney317 是的，我做到了，没有任何改变。
顺便说一句，对于直接 HTML/CSS/Javascript，您不需要运行本地主机，您只需在浏览器中打开 HTML 文件，只要所有路径都正确，它就可以工作。有时它不起作用，但这是特定于 javascript
默认缓存时间为 15 分钟。每次清除缓存或向 CSS 添加时间戳。 <link rel="stylesheet" href="style.css?v=<?php echo date('hisa');?>"

标签： html css

【解决方案1】：

您的 css 文件看起来无效。

尝试从中删除它``在此处输入代码`

对于 CSS 验证，请尝试使用验证器 here

*
{
   margin:0;
   padding:0;
}

.ios-switch{`enter code here`
    display: flex; 
    flex-direction: row; 
    align-items: center;
    margin: 10px 0; 
}

.ios-switch .switch-body{
    background-color: lightgray;
    border: solid 1px gray; 
    width: 96px;
    border-radius: 999px; 
}


.ios-switch .switch-body .toggle{
    width:48px; 
    height:48px;
    background-color: white;
    border-radius: 50%; 
}

【讨论】：

谢谢。不过，我发现了这个问题。我在 html 文件中使用 ref 而不是 rel。将其更改为后一切正常，我想在编程方面我们必须非常小心小细节。

【解决方案2】：

@ForestProgramming，没有一个缓存解决方案可以解决这个问题，因为它与您的缓存无关。由于某种原因，您的 Web 服务器出现故障。由于您只是使用 HTML/CSS，因此只需在浏览器中打开 HTML 文件，而不是使用 localhost。

您可以在文件菜单中执行此操作，然后打开，找到 HTML 文件并单击它。

【讨论】：

我只是这样做了，但仍然没有用。我只是不明白问题是什么。而且我在网上找不到任何可以帮助我的东西。当我在 codePen 上复制并粘贴我的代码进行测试并且代码在那里工作时。所以浏览器的东西出了点问题......
@ForestProgramming 尝试像我提到的那样在浏览器中打开 HTML，但在此之前进入您的代码并从 style.css 中删除查询字符串。
刚试了一下，还是不行。疯狂的是，在这个项目之前，我在另一个项目上工作，我可以轻松上传它，当我在我的 css 文件中进行更改时，这些更改会反映在浏览器上。但是对于这个项目，这些变化并没有反映出来。我的代码似乎很好。所以我不知道该怎么办。此外，当我检查我的开发工具时，我收到错误消息：VM25:1047 WebSocket connection to 'ws://localhost:8125/' failed: Error in connection established: net::ERR_CONNECTION_REFUSED
如果即使您没有像我建议的那样使用localhost，但仍然出现该错误，则说明发生了其他事情。因为我建议不要使用 localhost，而是在浏览器中本地打开文件。
是的，我通过转到 chrome 并从那里打开我的文件来做到这一点，我得到了相同的结果。我的代码可能有问题吗？

【解决方案3】：

您可以通过按 [Ctrl] + [F5]（重新加载）刷新页面清理缓存。

【讨论】：

【解决方案4】：

转到 DeveloperTools (F12) 而不是设置 (F1)，然后在 Network 首选项检查（禁用缓存（在 DevTools 打开时）-刷新页面

【讨论】：