请不要只指着一个 “特定性解释 “的网站来回答我,因为我已经读了很多这方面的书,在这个阶段,我需要有人来解释为什么我的选择器不优先。
我只是想覆盖以下Site.css选择器。
.dl-horizontal dt {
float: left;
width: 43%;
overflow: hidden;
clear: left;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
font-size: .9em;
}
.dl-horizontal dd {margin-left: 45%;font-size: .9em;}
用这个(直接在网页上)。
<style>
/* Using 2 classes so specificity overrides site.css "dl-horizontal dt" */
.gwx_override .gwx_dt2
{
width: 25%;
}
.gwx_override .gwx_dd2
{
margin-left: 27%;
}
</style>
呈现出来的HTML是这样的。
<dl class="dl-horizontal">
<dt class="gwx_override gwx_dt2">Notes</dt>
<dd class="gwx_override gwx_dd2">Once more rejecting this tag.</dd>
</dl>
我想实现的是,除了宽度和margin-left标签外,我想应用site.css中的大部分 “dl-horizontal”。 但我测试的浏览器(Firefox和Chrome)总是选择 “dl-horizontal “而不是我的 “gwx_override gwx_dt2″。
浏览器的检查器应用的是”.dl-horizontal dd”,它的特异性是0.1.1,而我的特异性是0.2.0–我的特异性不应该 “赢 “吗?
令我困惑的是,浏览器甚至没有在 “规则 “列表中显示我的选择符(比如当他们显示一个选择符被划掉时,就表示已经被否决了),所以我认为我一定是CSS格式错误。 但是我把我的CSS插入了几个验证器,他们说我很好。
这是页面的顶部,可以看到我的选择器的上下文,以及Site.css被引用的地方。 这是一个ASP.NET webform的渲染。
<html class="no-js" lang="en">
<head id="hdMain"><meta charset="utf-8" /><title>
Tag Confirmations
</title><meta name="author" content="na" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><meta name="google" content="notranslate" /><link rel="shortcut icon" href="../Resource/img/favicon/favicon.ico" />
<style>
.gwx_dt
{
font-size: 1.1em;
text-align: right;
}
.gwx_dd
{
text-align: left;
}
/* Using 2 classes so specificity overrides site.css "dl-horizontal dt" */
.gwx_override .gwx_dt2
{
width: 25%;
}
.gwx_override .gwx_dd2
{
margin-left: 27%;
}
</style>
<script src="/Resource/js/libs/jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript">window.jQuery || document.write('<script type="text/javascript" src="/Resource/js/libs/jquery-1.8.2.min.js"><\/script>')</script>
<link href="../App_Themes/Default/css/bootstrap.min.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/Default/css/bootstrap-responsive.min.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/Default/css/button.min.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/Default/css/font-awesome.min.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/Default/css/Site.css" type="text/css" rel="stylesheet" /><link href="/WebResource.axd?d=dhMRE7UEy7H080vdET4SQ5gaXv3yKJxFKjw0WJwjMOJXb_3uiqKz9iCutRYXNgczGznC3Qji1bVmCcREwl3gmsg89VoYWHoI5c1ffKReC3pa3UBDEov8wgpZH1tZNKBOHQZdm83u3WzAOZRlifWwtA2&t=635918956660000000" type="text/css" rel="stylesheet" class="Telerik_stylesheet" /><link href="/WebResource.axd?d=yO7Hnfif15zu3ajS_Kv2hIZOq3KB4gvK7aVCCwgBWFENha719NSIfzrGlrQmOaMbT8haRIkp-BPrOzfsg4dlULpKvYjYf3zDPnkD0cYbLIxpUFaZYBVOqIErAAKOOl9gU2z91bzHaLJALgMqeYlZuqhaA4YlMWbxsM2WvZG7MFM1&t=635918956660000000" type="text/css" rel="stylesheet" class="Telerik_stylesheet" /><link href="/WebResource.axd?d=M9dREq2pa3GD5R-MuoMAJO7TmjJQI86OXZMFLhRqz_lACLMSoj31CToFGgrCmBuC8hR-6n8Nsb78eYTdJebJ3vh71y1K0SEw9iq8oSh4pZJNt7iaAn0jOyUXAY3zQnWTronjbqmiQZPuoWnBJ3moKA2&t=635918956660000000" type="text/css" rel="stylesheet" class="Telerik_stylesheet" /><link href="/WebResource.axd?d=SLj6-zA4DTwqZ1ti9zYnP0U_Uz8SW1QJifMiNIveIpk6-jnuMHgIJbfScDBCpKbHN1hzAXHzgveilPMaHHpJ1MYssBokKNa0ILKEVLsKQIEIb-bkabQM2bFQI77lHSkWKcRGgFkFIgGxlG8Fa0prPdMgwjs4lr3lDFP2G7vb7ZY1&t=635918956660000000" type="text/css" rel="stylesheet" class="Telerik_stylesheet" />
</head>
<body>
解决方案:
你的问题是 不 的特殊性。
你的问题是你的选择器不匹配你想瞄准的元素。 (这是你自己注意到的)
令我困惑的是,浏览器甚至不在 “规则 “列表中显示我的选择器(比如当他们显示一个选择器被划掉时,就会显示该选择器已被驳回)。
.gwx_override .gwx_dt2
目标元素的CSS类 gwx_dt2
哪些 子孙 的元素的CSS类 gwx_override
. 该 space
字符在CSS中是有意义的:它是 子孙 选择器。
考虑到你展示的HTML,这不是你想要的。相反,你想要的是
.gwx_override.gwx_dt2
注意两个类名之间缺少的空格)。该选择器的目标是具有这两个类的元素。
我需要有人来解释为什么我的选择器没有优先。
它并没有针对你希望它针对的东西,所以特殊性在这里不是一个问题。