css - 关于应该区别对待的同一对象的多个实例的基本 CSS 问题

Question

我的网站中有许多标准结构，例如表格和按钮等。在某些情况下，我希望构造的一个实例以一种方式标记，而同一构造的不同实例以不同的方式标记。我该如何编写 CSS 来实现这一点？

例如，我有一些用于 Checkbox Hack 的复选框，它们需要保持不可见或隐藏在屏幕外，还有一些其他复选框是用于表单的真实复选框。编写 CSS 以便我可以区分两种类型的复选框并以不同方式标记它们的最佳方法是什么？

现在，我将 Checkbox Hack 中使用的复选框标记如下:

input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}

这有一个不幸的副作用，即完全隐藏我的“真实”复选框。我以一种稍微随意的方式学习了我的 CSS，所以我从未学习过针对这种常见情况的标准方法。有人能告诉我处理这个问题的最佳方法吗？

Answer 1

你可以使用 CSS classes .. 例如

input[type=checkbox].special {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

这样，只有具有 class="special" 的复选框才会受到影响。