Basic CSS – 为什么我的2类选择器不能覆盖1类+标签?[重复]


请不要只指着一个 “特定性解释 “的网站来回答我,因为我已经读了很多这方面的书,在这个阶段,我需要有人来解释为什么我的选择器不优先。

我只是想覆盖以下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&amp;t=635918956660000000" type="text/css" rel="stylesheet" class="Telerik_stylesheet" /><link href="/WebResource.axd?d=yO7Hnfif15zu3ajS_Kv2hIZOq3KB4gvK7aVCCwgBWFENha719NSIfzrGlrQmOaMbT8haRIkp-BPrOzfsg4dlULpKvYjYf3zDPnkD0cYbLIxpUFaZYBVOqIErAAKOOl9gU2z91bzHaLJALgMqeYlZuqhaA4YlMWbxsM2WvZG7MFM1&amp;t=635918956660000000" type="text/css" rel="stylesheet" class="Telerik_stylesheet" /><link href="/WebResource.axd?d=M9dREq2pa3GD5R-MuoMAJO7TmjJQI86OXZMFLhRqz_lACLMSoj31CToFGgrCmBuC8hR-6n8Nsb78eYTdJebJ3vh71y1K0SEw9iq8oSh4pZJNt7iaAn0jOyUXAY3zQnWTronjbqmiQZPuoWnBJ3moKA2&amp;t=635918956660000000" type="text/css" rel="stylesheet" class="Telerik_stylesheet" /><link href="/WebResource.axd?d=SLj6-zA4DTwqZ1ti9zYnP0U_Uz8SW1QJifMiNIveIpk6-jnuMHgIJbfScDBCpKbHN1hzAXHzgveilPMaHHpJ1MYssBokKNa0ILKEVLsKQIEIb-bkabQM2bFQI77lHSkWKcRGgFkFIgGxlG8Fa0prPdMgwjs4lr3lDFP2G7vb7ZY1&amp;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 

注意两个类名之间缺少的空格)。该选择器的目标是具有这两个类的元素。

我需要有人来解释为什么我的选择器没有优先。

它并没有针对你希望它针对的东西,所以特殊性在这里不是一个问题。

给TA打赏
共{{data.count}}人
人已打赏
解决方案

MySQL中的 "第1行的列数与值数不匹配 "是什么意思?

2022-5-14 4:00:13

解决方案

SQL Server不存在或访问被拒绝,但只对部分用户有效。

2022-5-14 4:00:15

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索