CSS样式表：一个按钮的样式[重复]答案

【问题标题】：CSS stylesheet: style for one button specifically [duplicate]CSS样式表：一个按钮的样式[重复]
【发布时间】：2020-06-23 22:13:14
【问题描述】：

这是我的 HTML 代码：

<button name='q1.button1' id='q1.button1' onclick='incorrect()' </button>

这是我的 CSS 文件：

.q1.button1 {
  width: 500px;
  height: 250px;
  background-image: url('images/buttons/q1.button1.jpg');
}

我也试过了：

#q1.button1 {
  width: 500px;
  height: 250px;
  background-image: url('images/buttons/q1.button1.jpg');
}

但它们都不起作用，按钮只是一个大白框！

我认为 HTML 可能有问题，所以我尝试了以下方法，它成功了：

Button {
  width: 500px;
  height: 250px;
  background-image: url('images/buttons/q1.button1.jpg');
}

但是，我不能使用它，因为每个按钮都必须不同，但这会改变所有按钮

【问题讨论】：

标签： html css

【解决方案1】：

您的按钮的 id 为“q1.button1”，而不是类！因此，请将 CSS 选择器中的前导点替换为哈希 (#)。

另外，搞砸的是你的 ID 名称中有一个点 (.)，而点是 CSS 中用于指定类名的特殊字符。

因此，要么使用不带点的 ID 名称，要么使用反斜杠 (\) 转义点。

#q1\.button1 {
  width: 500px;
  height: 250px;
  background-image: url('images/buttons/q1.button1.jpg');
}

&lt;button name='q1.button1' id='q1.button1' onclick='incorrect()'&gt; &lt;/button&gt;

【讨论】：

【解决方案2】：

从 'id' 属性中删除点

不要

<button name='q1.button1' id='q1.button1' onclick='incorrect()' </button>

试试这个：

<button name='q1.button1' id='q1button1' onclick='incorrect()' </button>

CSS：

#q1button1 {
  width: 500px;
  height: 250px;
  background-image: url('images/buttons/q1.button1.jpg');
}

【讨论】：

【解决方案3】：

CSS中特殊字符需要转义：

#q1\.button1 {
  width: 500px;
  height: 250px;
  background-image: url('images/buttons/q1.button1.jpg');
}

这个网站会为你逃脱他们https://mothereff.in/css-escapes

仅供参考，如果您想定位 name 属性，您必须这样做：

[name="q1.button1"] {
  width: 500px;
  height: 250px;
  background-image: url('images/buttons/q1.button1.jpg');
}

【讨论】：

【解决方案4】：

按钮未正确关闭。 CSS 在点前面需要一个反斜杠。 3分钟太慢了。 @WOUNDEDStevenJones 在 cmets 中提到了它。

#q1\.button1 {
  width: 500px;
  height: 250px;
  background-image: url('images/buttons/q1.button1.jpg');
}

&lt;button name='q1.button1' id='q1.button1' onclick='incorrect()'&gt; Cool Button &lt;/button&gt;

【讨论】：