CSS 可以帮助改善您的 HTML⁉ - 第 2 集：按钮和链接。

2025-06-05

CSS 可以帮助改善您的 HTML⁉ - 第 2 集：按钮和链接。

使用 CSS 使我们的 HTML 变得更好的第 2 部分！

在本系列的第二部分中，我们将探讨如何使用 CSS 来确保（并强制）我们正确使用<button>元素<a>……您会惊讶地发现有多少开发人员都犯了错误！

如果您错过了第一部分，您可能需要快速阅读一下，以便了解关键概念，因为我不会在这里详细重复它们：

文章已不再可用

全部都追上了吗？太棒了！

在我们开始第 2 部分之前，值得一提（重申）的是，这个概念依赖于两个样式表。

一个用于生产（和开发），一个仅用于开发（包含错误消息）。

在小提琴中，我已经指出了您将在生产样式表中使用哪些样式以及在开发样式表中使用哪些样式！

好的，提醒完毕，我们开始吧！

按钮就是按钮！

我知道我一直在说这个，听起来像一张破唱片，但是，按钮就是按钮！

文章已不再可用

瞧，我告诉过你我一直在说这句话！

但是如果我们可以使用 CSS 引导我们的开发人员得出这个合乎逻辑的结论呢？

好吧，首先，我们可以让我们的.btn课程只在 上起作用<button>。

button.btn{}
Enter fullscreen mode Exit fullscreen mode

尝试将该.btn类用于其他任何事物，但它就是不起作用！

但我们可以做得更好！

如果我们也可以给我们的团队一点警告，让他们知道他们使用了错误的元素，那会怎样？

.btn:not(button){/* wrong element error highlighting */}
Enter fullscreen mode Exit fullscreen mode

有意义的警告和错误消息

现在，虽然为错误的内容添加大纲很好，但它并没有提供太多的信息。

幸运的是我们也可以解决这个问题！

通过使用:after我们可以插入错误消息

因此，我们最终使用一个选择器来添加轮廓，并使用另一个选择器来添加相同但使用:after伪选择器的警告。

通过利用该content属性，我们可以添加自定义错误消息！

.btn:not(button) /* outlines */
.btn:not(button):after /* error message */
Enter fullscreen mode Exit fullscreen mode

按钮示例

在这个例子中，我们有一个真正的按钮和一个用 制作的假按钮<div>。

请注意真实按钮的工作方式，而假按钮没有样式，也没有错误消息！

更进一步！

我认为，对于大多数网站来说，我们实际上可以更进一步，完全取消.btn按钮上的类！

这有助于保持一致性，看起来更整洁，并强制执行我们的<button>按钮政策！

此时我们甚至不再需要错误检查，因为我们只能在<button>!上进行样式设置。

我们可以通过使用元素作为选择器来做到这一点button{}！

button{
    padding: 0.75rem;
    background-color: #333;
    color: #fff;
    margin: 2rem 0;
    border: 0;
    border-radius: 0.3rem;
    width: 100%;
}
Enter fullscreen mode Exit fullscreen mode

然而这可能会产生一个意想不到的后果......

这很好，但是我们经常将锚点设计成按钮的样式！

这是一个有效的观点，现在看来，你是对的！

然而，我们可以从第一部分回收我们的选择器，这样我们就可以只在锚点上有一个.btn类（ ）！<a>

button,
a.btn{/* our styles for buttons! */}
Enter fullscreen mode Exit fullscreen mode

这确实意味着我们必须重新引入错误检查，但这次要确保我们只.btn在锚点上使用该类！

.btn这就提出了一个有趣的问题，如果我们有一个类，我们是否想要显示错误<button>？

如果我们这样做，那么我们的错误选择器只需要进行细微的改变

.btn:not(a){}
.btn:not(a):after{}
Enter fullscreen mode Exit fullscreen mode

这会将我们的错误消息添加到<button class="btn"，这可能会造成混淆。

.btn因为将该类放在 a 上不会造成任何损害<button>（因为我们无论如何都没有有效的选择器）我认为最好不要在这种情况下显示错误消息。

然而，CSS 的强大功能使这变得相对简单，我们可以在:not选择器中添加多个项目！

.btn:not(a,button){}
.btn:not(a,button):after{}
Enter fullscreen mode Exit fullscreen mode

这就是说：-

  • 选择所有具有该.btn类别的项目
  • 不属于（:not()）
  • 锚点（a）
  • 或按钮,button（以逗号分隔）。

包含锚点的示例

综合以上所有，我们得到以下结果：

看起来很棒，但我们可以走得更远！

但我们只想要有效的锚点

现在我们已经允许.btn将类添加到锚点，我们又遇到了另一个问题！

可怕的<a href="#"或<a href="javascript: void()！

自 HTML5 以来，这种反模式就不再需要了（您确实读过我之前链接的关于按钮的咆哮，不是吗？）。

那么我们该如何解决这个问题呢？

在第 1 部分中，我们使用了属性选择器[attr]，它们再次帮助我们！

由于这是一个站点范围的错误（它永远不应该被使用！）我们可以忽略.btn选择器并只关注锚点！

第一个问题比较容易解决，我们选择任何带有的锚点href="#"（当然，也可以选择空的href或缺失的锚点href！）

a:not([href]), /* A missing href attribute! */
a[href=""], /* an empty (or null) href */
a[href="#"] /* the anti pattern! */
Enter fullscreen mode Exit fullscreen mode

这涵盖了其中的大部分内容，我们只需要强调 JavaScript 反模式！

我们在第 1 部分中再次讨论过这一点，我们可以使用“以...开头”符号：

a[href^="javascript:" i]
Enter fullscreen mode Exit fullscreen mode

记住末尾的“i”以使其不区分大小写。

我们在这个例子中使用了“以...开头”^=语法，因为它不必如此javascript: void()，这样我们就可以捕获所有 JavaScript href，无论它们调用什么函数！

有效锚点的示例！

利用相同的系统，:after我们也可以向我们的锚点添加消息！

注意：我们可以针对问题出在缺失href、错误href还是 JavaScript 的使用，分别显示不同的消息，从而改进这个问题。我在示例中没有这样做，但您可以按如下方式操作：

a:not([href]):after{content: "missing href attr"}
a[href="#"]:after{content: "anti-pattern on href detected"}
a[href=""]:after{content: "empty or null href"}
a[href^="javascript:" i]:after{content: "using javascript in href anti-pattern detected"}
Enter fullscreen mode Exit fullscreen mode

其他值得一提的事情

正如@ashleyjsheridan指出的那样，没有 的锚点是完全有效的href。

因此，当我将缺少属性或href属性为空的锚点标记为错误时，这是​​我的错误。

相反，这些应该降级为“警告”，以便发现错误。

此外，这意味着如果您<a name="sectionName">出于任何原因使用它，它只会是一个警告（尽管这是一种相当过时的做法，因为您只需为元素提供一个id属性并链接到该属性即可）。

总的来说，它没有任何影响，因为开发href样式表不会影响生产，但如果你做一些边缘情况的事情，比如动态地添加到现有的锚点，可能会有点烦人。

此外他们还提到：

也许还值得考虑 3 种按钮类型：按钮、提交和重置。

这是一个很好的观点，因此要添加这些内容，您需要更新选择器以达到目标：

button,
a.btn,
input[type="button"],
input[type="submit"],
input[type="reset"]{
  /* can use the same default styling and overwrite with additional styles to differentiate as needed */
}
Enter fullscreen mode Exit fullscreen mode

如果您需要使用那些。

结论

我们在第 1 部分中学到的很多内容已经延续到了第 2 部分。

只是我们的选择器变得稍微复杂了一些。

但希望您能看到这如何让我们再次执行业务风格指南（例如，是否要求元素.btn上有类）。<button>

在下一部分中，我们将重点介绍文档结构的最佳实践，并介绍一些 WAI-ARIA 属性以及一些技巧和窍门！

感谢阅读！

感谢您的阅读，希望您喜欢！

事实上，为了表达我的感激之情，请用虚拟的❤和🦄来表达这对我有多重要！

如果你喜欢这篇文章，并且想要一些小东西（好吧，我已经写了很长时间了），为什么不读读我的怪物可访问性提示文章呢：

文章已不再可用

祝您度过愉快的一周！

文章来源：https://dev.to/grahamthedev/css-can-help-improve-your-html-ep-2-buttons-and-links-21m9
Devto 翻译
PREV
您是否拥有一个毫无用途的域名？让我来给您一个项目！
NEXT
无需 JS、CSS 或图像的动画？！😲 纯 HTML 动画！