Question

这是我的网站标题，其中包含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属性，而无需下载css文件并手动编辑它：

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

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

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

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

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

Answer 1

使用

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

Answer 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">

Answer 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中，然后才会覆盖。

Answer 4

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

感谢techfoobar

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

4 个答案: