Question

我一直在尝试将CSS实施到HTML文件，但是它不起作用，我尝试使用什么都没有关系。我100％肯定我想念什么，有人可以告诉我这是什么吗？

谢谢！

  :root {
  --content-width: 80%;
}

@media (max-width: 500px) {
  :root {
    --content-width: 95%;
  }
  html,
  body {
    background-color: blue;
    width: 100%;
    height: 100%;
    margin: 0;
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
  }
  div#content {
    background-color: hsl(209, 100%, 90%);
    width: var(--content-width, 80%);
    max-width: 850px;
    margin: 20px auto;
    padding: 0 20px 100px 20px;
  }
  h1 {
    text-align: center;
    font-size: 32px;
    font-weight: 600;
    padding: 20px 0;
    margin-bottom: 0;
  }
  #img-div {
    width: 100%;
    margin: auto;
    background-color: hsl(209, 100%, 90%);
    text-align: center;
  }
  figure {
    border: 2px solid hsl(212, 55%, 54%);
    border-radius: 2%;
    margin: auto;
    max-width: 640px;
    background-color: white;
    padding: 5px 5px 0 5px;
  }
  figure:hover {
    -webkit-transform: scale(1.01);
    -ms-transform: scale(1.01);
    transform: scale(1.01);
  }
  img#image {
    width: 100%;
    max-width: 640px;
    display: block;
    margin: auto;
  }

<!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Oswald:400,600" rel="stylesheet">
  <title>Queen</title>
</head>

Answer 1

通过检查CSS，我发现了两个小问题。

在第一个根选择器中，：和根之间有空格。我认为正确的语法是:root
您缺少大括号}。您必须在第二次选择根目录之后或根据用例在所有CSS样式的末尾添加它。

Answer 2

根据您的代码，导致媒体查询中缺少右括号}的罪魁祸首。

话虽如此，它不应该影响之前应用的样式。但是，如果仍然不能正常运行，则可能是由于以下行中为您的html文件指定的css文件位置错误：

<link rel="stylesheet" href="style.css">

上一行表示您的css文件与html文件位于同一目录中。如果不是这样，您的CSS代码将无法正常工作。

引用：https://www.w3schools.com/html/html_filepaths.asp

希望有帮助。干杯！

Answer 3

Helo Sergi。

如果您

LinkedList<>

在您的CSS中应用此样式，即可使用样式。

此行中有些错误，或者缺少我不知道的东西，但是问题是这样。

我的CSS对HTML文件没有任何作用

3 个答案: