Question

上下文：我试图只是一个带有两个CSS类的按钮。第一个是我应用于所有按钮的一般样式类，.button，第二个是我想要的特定样式的特定样式，我命名为.button3。我是CSS的新手，但是我在调用按钮元素上的类并在CSS中声明类但没有任何变化时尝试了许多不同的格式。

我使用的是聪明的。

应用class =“button button2”适用于chrome，但不适用于class =“button button3”

这些课程在Safari中运行良好。

在SO代码预览中运行代码在Chrome中运行良好，但在我的实际页面上运行不正常。

这些按钮类主要基于W3Schools CSS按钮教程。 https://www.w3schools.com/css/css3_buttons.asp

考虑到这些，我认为这是一个非常具体的问题，当涉及到CSS本身，Chrome或者只是一些非常明显的事情时，我会在一段时间内处理事情后对此视而不见

-Edit-另外，正如标题所暗示的那样，只有第二类（.button3）存在问题。第一堂课（.button）适用于Chrome和Safari。

问题：

Chrome和Safari之间的这种情况有什么不同？

- 和/或 -

为什么class =“button button2”在Chrome中有效，但class =“button button3”不起作用？

.button {
    background-color: whitesmoke;
    border: none;
    color: black;
    padding: 5px 15px;
    margin: 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    border: 1px solid black;
    /*border-radius: 8px;*/
}
.button2 {
    color: white;
    padding: 5px 7px;
    background-color: #f44336; /*red*/
    border: 1px solid #f44336;
    /*border-radius: 75%;*/
}
.button2:hover {
    background-color: whitesmoke; 
    color: black;
}
.button3 {
    color: white;
    padding: 5px 7px;
    background-color: lightseagreen;
    border: 1px solid lightseagreen;
}
.button3:hover {
    background-color: whitesmoke; 
    color: lightseagreen;
}

<button class="button button3" type="submit" value="Submit"> Submit </button>

-Edit 2- 我找到了问题的根源。似乎我的localhost上运行的CSS文件在到达我的.button3类之前突然结束。我正在寻找为什么会这样，但是还没有找到任何会导致它的东西。

Answer 1

我不知道你的意思。但是，您可以在要强制浏览器使用它们的!important属性中使用CSS属性。
像这样：

＆＃13;

.button3 {
    color: white;
    padding: 5px 7px;
    background-color: lightseagreen !important; /* <-- That's the magic */
    border: 1px solid lightseagreen;
}

＆＃13;

编辑：我看到了我朋友的评论，看到!important属性对他不起作用。我们可以做的另一件事是将classes更改为ids。喜欢：

＆＃13;

.button {
    background-color: whitesmoke;
    border: none;
    color: black;
    padding: 5px 15px;
    margin: 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    border: 1px solid black;
    /*border-radius: 8px;*/
}
#button2 {
    color: white;
    padding: 5px 7px;
    background-color: #f44336; /*red*/
    border: 1px solid #f44336;
    /*border-radius: 75%;*/
}
#button2:hover {
    background-color: whitesmoke; 
    color: black;
}
#button3 {
    color: white;
    padding: 5px 7px;
    background-color: lightseagreen;
    border: 1px solid lightseagreen;
}
#button3:hover {
    background-color: whitesmoke; 
    color: lightseagreen;
}

＆＃13;

<button id="button3" class="button" type="submit" value="Submit"> Submit </button>

＆＃13;

它应该有用......

为什么在Safari执行时Chrome不会将我的第二个CSS类应用于我的按钮？

1 个答案: