当我清除浏览器数据时，CSS 更改仅适用于我的浏览器

如何解决当我清除浏览器数据时，CSS 更改仅适用于我的浏览器

我设置了一个登陆页面，非常简单地只是在屏幕中间显示一些文本。我为此使用了 flex。当我尝试一些更改时，我注意到我所做的更改将不会应用于我的浏览器，除非我清除浏览器数据（历史记录、cookie 等）。我尝试了 chrome、firefox 和 android 互联网。在所有浏览器中，只要我清除数据，登陆页面就会显示更新的内容。但这只会发生在更改的 css 中。当我更改 html 时，我将在页面上立即更新。它发生在桌面和移动设备上。

有谁知道为什么会这样以及如何避免它？我在下面显示以下代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Landing page</title>
        <link rel="stylesheet" href="style.css"/>
    </head>
    
    <body>
       
        <div class="flex-container">
            
            <div class="items style"><h1>My<strong>TEXT</strong></h1>
            <p>Business type | email@email.com </p></div>
        </div>
    </body>
</html>

样式.css

body{
    overflow: hidden;
    background: black;
}

.flex-container{
    display: flex;
    background-color: black;
    justify-content: center;
    flex-wrap: Nowrap;
    align-items: center;
    min-height: 100vh;
    }


.style{
    font-family: 'Poppins',sans-serif;
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: #FFFFFF;
    }

@media screen and (min-width: 800px){
    .flex-container > div {
        background-color: black;
        margin: 20px;
        padding: 20px;
        font-size: 220%;
        color: white;
        border: thin solid white;
        text-align: center;
        border-radius: 5px;
    }

}

@media screen and (max-width: 799px){
    .items{
      flex: 100%;
      align-items: center;
      }
}

解决方法

您可以做的是为该 css 文件附加一个版本号。这将强制浏览器加载更新的 css 文件，而不是使用缓存的文件。试试这个语法，例如：

function Quotebox() {
  const [index,setIndex] = useState(0); // setting 1st quote as default

  function changeQuote() {
    let newIndex = Math.floor(Math.random() * (Myarray.length - 0) + 0); // now on every click setting a random index between 0 and quotes array length (quotes array length is excluded)
    setIndex(newIndex);
  }

  return (
    <>
      <p>{Myarray[index].quote}</p>
      <p>- {Myarray[index].author}</p>

      <button onClick={changeQuote}> change </button>
    </>
  );
}

不错的方法。但它没有用。它只是一个简单的登录页面，就像任何其他 html 页面一样。为什么我的会出现这个问题？和flex有关系吗？