Question

.title_Btn{
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
}

<button><i class="fas fa-caret-down title_Btn"></i></button>

如果我在 css 中将“.title_Btn”更改为“button”，效果很好但我不知道为什么“.title_Btn”不起作用。我在按钮中创建了一个类“title_Btn”。我的错误是什么？

Answer 1

您应该为按钮标签内的按钮应用样式：

.title_Btn{
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
}

<button class="title_Btn"><i class="fas fa-caret-down"></i></button>

Answer 2

您已将 title_Btn 类添加到 <i> 标记中，将其添加到 <button> 标记中像这样：

.title_Btn{
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
}

<button class="title_Btn"><i class="fas fa-caret-down"></i></button>

Answer 3

.title_Btn{
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
}

<button class="title_Btn"><i class="fas fa-caret-down"></i></button>

问题出现是因为您将类放在“i”标签内而不是标签内..

Answer 4

在 title_Btn 内而不是在 <button> 标签中使用 <i>。

HTML：

<button class="title_Btn"><i class="fas fa-caret-down"></i></button>

CSS：

.title_Btn{
        background-color: Transparent;
        background-repeat:no-repeat;
        border: none;
        cursor:pointer;
        overflow: hidden;
        outline:none;
    }

按钮和类有什么区别？

4 个答案: