My CSS doesn't change, why?

问题

So after many weeks, I got back to coding and I've got a problem.

The project I was working on contains the basic stuff of a PHP site and now I'm trying to re-design my homepage.

The problem is, that everytime I delete or change something in the CSS, the design never changes as if it's like frozen or something, and it happens for every page. When I delete the link to the CSS in my HTML, the design goes away. Here's the code:

var scrolled=0;
    $(document).ready(function() {
        $("#master").click(function() {
            $("#holder").slideToggle('slow');
        });
                
        $("#down").on("click" ,function() {
            scrolled=scrolled+300;
            $("#solut").animate({
                scrollTop: scrolled
            });
        });
    });

@font-face {
      font-family: 'FontAwesome';
      src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
      src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
      font-weight: normal;
      font-style: normal;
    }
    
    body {
        margin: 0;
        padding: 0;
        background-color: #e0e0e0;
        overflow-x: hidden;
    }
    .navbar {
        width: 100%;
        height: 60px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="icon" href="assets/logo.png" />
        <link href="css/font-awesome.min.css" rel="stylesheet" />
    </head>
    <body>
        <center>
          //code goes here: bunch of divs and texts
        </center>
    </body>
    </html>

回答1:

Getting back to an old project without a short run-through-guide, readme or a basic list of automated tasks can lead to several, unwanted side effects, when running and testing the website.

Here are some of what I've met before from the top of my head:

Browser cache: Open DevTools in Chrome, then reload the page by clicking Empty Cache and Hard Reload (Ctrl+Shift+F5). If it doesn't help, give your CSS a name like: (more on cache-bursting): <link href="css/index.css?v=1.0.1" rel="stylesheet" />
Framework cache: If you use a framework with resource caching, delete/empty it. It depends on what framework you use, if any.
CSS Transpiler does not run: If you use some transpiler (SASS, LESS, etc.), sometimes running of the transpilation is forgotten.
Testing on mobile devices: They can and do cache often, just use cache-bursting during development.
Wrong paths/inability to access files: Check your webserver logs to get what's wrong.
Not REALLY editing the file: If you prefer an IDE (e.g.: IntelliJ IDEA ;)) and when you edit the specific file, save it, then upload it (e.g.: via FTP), it can happen, that the specific file won't get updated. More on this.

回答2:

It may be a caching issue. But have you double checked your developers tool to see if the CSS is carrying over? Sometimes I make small mistakes of linking the file incorrectly - forgetting to go back a folder "../css/index.css

来源：https://stackoverflow.com/questions/50802820/my-css-doesnt-change-why

标签

html

css

caching

web

frontend