如何借助data属性关联元素，使用CSS自定义按钮的背景色、字号等样式？

直接给你一套实用的自定义样式方案，结合你的HTML结构，代码如下：

<a href="#" data-context="desk">
    <button type="button" class="custom-btn">Button</button>
</a>

<style>
/* 基础自定义按钮样式 */
.custom-btn {
  /* 自定义背景色 */
  background-color: #4CAF50;
  /* 自定义字号 */
  font-size: 16px;
  /* 补充常用优化样式，可按需调整 */
  color: #fff;
  border: none;
  padding: 10px 22px;
  border-radius: 6px;
  cursor: pointer;
  /* 悬停过渡动画 */
  transition: background-color 0.2s;
}

/* 鼠标悬停时的背景色变化 */
.custom-btn:hover {
  background-color: #43a047;
}

/* 针对data-context为desk的容器下的按钮单独设置样式 */
a[data-context="desk"] .custom-btn {
  background-color: #2196F3;
  font-size: 18px;
}
</style>

关键说明： #

• 给按钮添加了custom-btn类，方便精准控制样式，不会干扰页面其他按钮
• 核心的background-color和font-size可以直接修改数值，比如把背景色换成#ff9800、字号改成20px
• 补充的样式（内边距、圆角、过渡效果）是为了让按钮更美观，你可以根据需求增减
• 利用父元素的data-context="desk"属性，可以给特定场景下的按钮单独设置样式，适合多场景复用

内容的提问来源于stack exchange，提问作者Bruno Bros