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

Posted 2023-03-06

【中文标题】CSS样式表：一个按钮的样式[重复]

【英文标题】：CSS stylesheet: style for one button specifically [duplicate]

【发布时间】：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');

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

【问题讨论】：

使用\. 转义你的点。点在 CSS 中用于类。

非常感谢它的工作！

【参考方案1】：

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

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

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

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

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

【参考方案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');

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