css - CSS无效的属性值？

Question

我不明白这有什么问题？我正在看一个教程，它似乎在视频上运行良好，但 mozilla 和 chrome 都会忽略此代码并将其标记为无效的属性值。

.btn {
    background-color: #4FB69F url("img/texture.png") no-repeat right top;
}

score 42 · Accepted Answer

改变

background-color:

至

background:

因为background是一个简写属性

score 3 · Accepted Answer

如果您在 CSS 中使用了引号，请将它们从您的 CSS 文件中删除。

例如，找出每个 CSS 规则集之间的差异.row：

.row {
     margin-left:'-16px !important';
    margin-right:'0px !important';
}

.row {
    margin-left:-16px !important;
    margin-right:0px !important;
}

score 3 · Accepted Answer

另一个可能的原因可能是您在 css 属性或值中有一个“隐藏字符” 。

要解决此问题，请将代码直接从您的 IDE 复制到一些“隐藏字符”检测器，例如https://www.soscisurvey.de/tools/view-chars.php，删除“坏”字符，然后保存您的代码再次没有坏字符。

奖励：如果您使用像 WebStorm 这样的 JetBrains IDE，这个插件可以帮助您https://plugins.jetbrains.com/plugin/7448-zero-width-characters-locator

score 2 · Accepted Answer

不是直接的解决方案，而是 CSS 属性值的拼写错误对我造成了类似的问题：

.PokeCard {
border: 2px solic mediumseagreen;
}

问题是一个错字solic而不是solid。

score 0 · Accepted Answer

我有类似的问题。

我试图应用背景，但有一个错字。

我在 CSS 中尝试过的

我得到了这个错误

只需从值中删除双引号。因为 css 中的十六进制值不在双引号中。

score 0 · Accepted Answer

background-color: #4FB69F; 
background-image: url('images/texture.png'); 
background-repeat: no-repeat; 
background-position: right top;

图片 url 内要求' not ' 背景位置与无重复和;之间的每个元素控件分开

score 0 · Accepted Answer

而不是写：

.btn {
  background-color: #ffffff;
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

您可以使用速记属性背景：

.btn {
  background: #ffffff url("img_tree.png") no-repeat right top;
}

是否缺少其中一个属性值并不重要，只要其他属性值按此顺序排列即可。了解更多

7 回答 7