样式表与 jquery ui 样式冲突
我有以下样式，可以按照我希望的方式工作：
.container { font-family:arial; text-decoration:none; font-size:12px; }
.title {color:#707070; text-decoration:none; }
.username {color:#8DAAB8;}
.dateandtime {color:#A5A7AC;}
.container:hover .title { color: #000000; }
.container:hover .username { color: #DF821B; }
.container:hover .dateandtime { color: #3185B6; }
但是由于某种原因，当我将以下样式添加到我的页面（我需要）时：
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
上面原始样式中的 .title 类停止工作，并且由于某种原因它仍然是 #000000。正常状态下应为 #707070，悬停时应为 #000000。
为什么在添加外部样式表时会发生这种情况？如何在不删除外部样式表的情况下阻止这种情况发生？
一旦我删除了外部样式表，.title类就开始再次完美工作，但页面的其余部分，jquery-ui-tabs，jquery- ui-sortables 停止正常工作。
I have the following style which works as I want it to work:
.container { font-family:arial; text-decoration:none; font-size:12px; }
.title {color:#707070; text-decoration:none; }
.username {color:#8DAAB8;}
.dateandtime {color:#A5A7AC;}
.container:hover .title { color: #000000; }
.container:hover .username { color: #DF821B; }
.container:hover .dateandtime { color: #3185B6; }
But for some reason, when I add the following style to my page (which I need):
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
The .title class in the original style above stops working, and it remains #000000 for some reason. It should be #707070 in normal state, and #000000 when hovered over.
Why is this happening when I add the external style sheet and how do I stop this from happening without removing the external style sheet?
As soon as I remove the external stylesheet, the .title class starts working perfectly again, but the rest of the page, jquery-ui-tabs, jquery-ui-sortables stop working properly.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
好吧，我明白了。那么您的外部样式表没有
.title的样式规则，因此某些组合会覆盖您的样式。为了确保您的风格占主导地位，请尝试使您的规则更加具体。如果您有其他元素始终包装.title元素，请将它们添加到规则中，如下所示：#container .something .title以获得更具体的规则。Ok i see. Well your external stylesheet has no style rule for
.title, so some combination overwrites your style. To make sure that your style takes predence, try to make your rule more specific. If you have other elements that always wrap your.titleelements, add them to the rule like this:#container .something .titleto get a more specific rule.