如何为外部 css 文件添加额外的元素样式？答案

【问题标题】：how can i add extra element style for external css file?如何为外部 css 文件添加额外的元素样式？
【发布时间】：2014-03-02 07:47:59
【问题描述】：

这是我的网站标题，包含 2 个样式表：

<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

此代码在 jquery-ui.css 文件中：

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
    border: 1px solid #999999;
    background: #dadada url(images/ui-bg_glass_75_dadada_1x400.png) 50% 50% repeat-x;
    font-weight: normal;
    color: #212121;
}

我还使用来自 jquery.com 的外部样式表：
//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css

现在我需要将 ui-state-hover 的 opacity 属性更改为：

.ui-state-hover{
opacity:0.1;
}

所以在我的内部 style.css 文件中我添加了：

.ui-state-hover{
    opacity:0.1;
    }

但是，它不起作用......

如何在不下载、手动编辑文件和上传的情况下添加额外的样式规则？我应该只使用内部样式表吗？

【问题讨论】：

它不起作用，因为库中的定义更具体。 coding.smashingmagazine.com/2007/07/27/…
.ui-state-hover {不透明度：0.1 !important;}
我的建议是，你下载所有那些 CSS 和 JS 文件，因为未来无法预测。

标签： jquery css jquery-ui

【解决方案1】：

使用

.ui-state-hover{
    opacity:0.1 !important;
    }

【讨论】：

【解决方案2】：

您可以在内部样式表中使用!important。

请检查以下代码..

.ui-state-hover{
    opacity:0.1 !important;
    }

希望这会对你有所帮助..

或者像下面这样切换样式表的加载顺序..

<link href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" media="screen">
<link href="css/style.css" rel="stylesheet" type="text/css" media="all">

【讨论】：

【解决方案3】：

切换 CSS 的下载顺序：

<link href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" media="screen">
<link href="css/style.css" rel="stylesheet" type="text/css" media="all">

首先加载 UI，然后加载您自己的 CSS，这将允许您在不使用 (bad) !important 的情况下覆盖某些设置。

确保将确切的特定选择器复制到您自己的 CSS，然后会发生覆盖。

【讨论】：

【解决方案4】：

它不起作用，因为库中的定义更具体http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

感谢 techfoobar

【讨论】：