从外部 css 文件覆盖 css 样式答案

【问题标题】：Override Css styling from external css file从外部 css 文件覆盖 css 样式
【发布时间】：2014-08-22 19:15:44
【问题描述】：

下面是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>

有什么建议吗？

【问题讨论】：

由于特殊性，您需要这样做inline。 css-tricks.com/specifics-on-css-specificity
您的第二个<style> 定义在哪里？在你的<head>?
事实上它应该可以工作，因为类选择器比元素选择器具有更高的特异性值。

标签： html css

【解决方案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)

【讨论】：

或!important。但有些人称之为“！重要的地狱”。
谢谢，添加到回答中。
虽然是这样，但它并没有解释为什么元素选择器会覆盖类名选择器；而element {} 的特异性值低于.class {}。

【解决方案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 不是很聪明，因为您以后无法更改。

【讨论】：

所有这些建议都是正确的。然而，似乎 OP 做错了什么；检查my comments。