如何定制语义界面按钮(背景色、边框半径、全部) [英] How to customize the Semantic UI buttons(background-color, border-radius and all)

问题描述

如何定制语义界面按钮(背景色、边框半径、全部)

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

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

上述代码不起作用

推荐答案

您需要使您的自定义属性比语义使用的属性更具体。专用性的工作原理(简单地说)是，当同一元素上有相互竞争的属性值时，会选择更"特定"的那个。

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

针对您的特定问题：

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

方法1

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

另一种方法是只需向要选择的元素添加ID

方法2

#create-new-menu-btn {
}

如果要将属性应用于多个元素(因此使用类)(如页面上的多个注释按钮)，则首选方法1

如果要选择单个元素，则首选方法2。(类似于标题中的登录/注册按钮)

这篇关于如何定制语义界面按钮(背景色、边框半径、全部)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！