Question

以下是custom.css文件中的代码，该文件是html页面内的外部css。

button {
cursor: pointer;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
border: none; 
padding: 0; 
margin: 0; 
background: none; 
-webkit-user-select: none; 
-moz-user-select: none;
user-select: none;
}

我想用自己的风格覆盖它。我尝试了HTML中的followig，但它不起作用：

<style> .myButton {background-color:initial; } </style>
<button class="myButton">Add</button>

任何Sugesstions？

Answer 1

如果您有权访问HTML，则可以内联：

<button class="myButton" style="background-color:initial;color:red;" >

内联样式始终优先。

如下面的user32342534所述，你也可以在css中使用！important标志：

<style> .myButton {background-color:initial !important; } </style>

另见：

When to use "!important" to save the day (when working with CSS)

Answer 2

您需要做的就是在custom.css

中header之后添加您的风格

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <title>Kougiland-Studio</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="description" content="learn css" />
    <meta name="keywords" content="what ever you like" />
    <meta name="author" content="your name" />
    <link rel="shortcut icon" href="favicon.ico"> 
    <link rel="stylesheet" type="text/css" href="custom.css" /><!--custom style-->
    <link rel="stylesheet" type="text/css" href="mystyle.css" /><!--your style-->
</head>

你可以写mystyle.css中的

：

button{
  /*what ever you like*/
}

注意：使用!important不是很聪明，因为您以后无法更改。

从外部css文件覆盖Css样式

2 个答案: