如何自定义语义 UI 按钮（背景颜色、边框半径等）

Question

<button class="ui button create-new-menu-btn">Create New Menu</button>

. create-new-menu-btn {
    border-radius: 0;
    background-color: red;
}

上面的代码不起作用

Answer 1

您需要使自定义属性比语义使用的属性更具体。特异性的工作原理（简单地说）是，当同一元素上存在相互竞争的属性值时，选择更“具体”的那个。

阅读本文以了解有关 CSS 特异性的更多信息：https : //developer.mozilla.org/en/docs/Web/CSS/Specificity

对于您的特定问题：

使您的自定义 CSS 更具体的一种方法是在页面的 body 标记中使用 id 并使用以下选择器：

方法一

#bodyid .create-new-menu-btn {
    //Properties
}

另一种方法是简单地向要选择的元素添加一个 id

方法二

#create-new-menu-btn {
}

当您想在多个元素上应用属性（因此使用类）（如页面上的多个评论按钮）时，首选方法 1

当要选择单个元素时，首选方法 2。（就像标题中的登录/注册按钮）