Question

只需掌握基本的编码技能，并且当我在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%; 
}

最后，当我在网上查找此问题时，有人建议使用google chrome中的开发人员工具，但我发现有此错误消息：

VM25：1047 WebSocket与'ws：// localhost：8125 /'的连接失败：连接建立错误：net :: ERR_CONNECTION_REFUSED

非常感谢您的时间。

Answer 1

转到DeveloperTools（F12）而不是设置（F1），并在“网络”首选项中进行检查（禁用缓存（打开DevTools时）-刷新页面

Answer 2

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

Answer 3

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

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

Answer 4

您的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%; 
}

CSS文件未在浏览器中更新

4 个答案: