css - bootstrap 3 文本元素似乎从同一文件中获取错误的 css

Question

我已经算不上设计师了，但是当 bootstrap 出错时，它会变得更丑陋!哈哈

症状:

对于电子邮件输入元素，bootstrap 3.1.1(或 3.2.1)文本 input.form-control 正在获取 input[type="text"] 高度为 20px 的 css 而不是 .form-control 高度34px。 (还有轮播的其他问题，但这个问题也可能会解决)。

<input name="email" id="email" class="email form-control" value="" placeholder="Email" type="text">

firefox 和 chrome 调试器显示计算样式

height: 20px;
: 0d2f40c28e9c5f841c06747091712c74bd91fff6.css:8918 input[type="text"] 20px;
: 0d2f40c28e9c5f841c06747091712c74bd91fff6.css:2236 .form-control 34px;  ( this has a strike-through font )

几周前这看起来还不错，现在我似乎遇到了特定顺序问题？？？

最后一个已知的好例子: http://blogtation.meteor.com/

目前的困惑: http://blogtationcss.meteor.com/

我应该看什么？

详细信息:

尝试使用最新的和下面的(3.1.1-1)“bootstrap-3”，都使用 meteor 0.8.2 和 0.8.1

智能锁

{
  "meteor": {},
  "dependencies": {
    "basePackages": {
      "iron-router": {},
      "bootstrap-3": {
        "git": "https://github.com/mangasocial/meteor-bootstrap-3.git",
        "tag": "v3.1.1-1"
      },
      "collection-hooks": {},
      "mongo-counter": {},
      "dstreams": {
        "git": "git@github.com:jimmack1963/meteor-streams.git",
        "branch": "master"
      },
      "momentjs": {},
      "event-hooks": {},
      "cookies": {},
      "headers": {},
      "server-info": {},
      "bootstrap-alerts": {},
      "accounts-entry": {},
      "captcha": {},
      "roles": {},
      "fastclick": {},
      "timesync": {}
    },
    "packages": {
      "iron-router": {
        "git": "https://github.com/EventedMind/iron-router.git",
        "tag": "v0.7.1",
        "commit": "d1ffb3f06ea4c112132b030f2eb1a70b81675ecb"
      },
      "bootstrap-3": {
        "git": "https://github.com/mangasocial/meteor-bootstrap-3.git",
        "tag": "v3.1.1-1",
        "commit": "63dd38968828bb8963636df93e9a1c45e2dfe67e"
      },
      "collection-hooks": {
        "git": "https://github.com/matb33/meteor-collection-hooks.git",
        "tag": "v0.7.2",
        "commit": "261f61f07b371ae913463fba8964a9b93cab531b"
      },
      "mongo-counter": {
        "git": "https://github.com/awwx/meteor-mongo-counter.git",
        "tag": "v1.1.0",
        "commit": "9a0710543cec7c192e38d5acc54cf3b0a9fbcb20"
      },
      "dstreams": {
        "git": "git@github.com:jimmack1963/meteor-streams.git",
        "branch": "master",
        "commit": "c29a5f95cf33727719e67767ab8e19dc90f07c6f"
      },
      "momentjs": {
        "git": "https://github.com/crapthings/meteor-momentjs.git",
        "tag": "v2.1.0.2",
        "commit": "59a762e297082eea8b8cae00374c2b7ac6f89529"
      },
      "event-hooks": {
        "git": "https://github.com/BenjaminRH/meteor-event-hooks.git",
        "tag": "v1.4.3",
        "commit": "ba4f3d7887748458618d29615492906f0c88d31c"
      },
      "cookies": {
        "git": "https://github.com/subhog/meteor-cookies.git",
        "tag": "v0.3.0",
        "commit": "c3d2684cd97dd611652833169b5f628ad23c57f6"
      },
      "headers": {
        "git": "https://github.com/gadicohen/meteor-headers.git",
        "tag": "v0.0.24",
        "commit": "3c09e682895e13c71ca0114baf3c09ee9c507709"
      },
      "server-info": {
        "git": "https://github.com/percolatestudio/meteor-server-info.git",
        "tag": "v0.6.2",
        "commit": "db2c0b5863f2209acfd2f82d1fa45ec33ab31b82"
      },
      "bootstrap-alerts": {
        "git": "https://github.com/asktomsk/bootstrap-alerts.git",
        "tag": "v0.0.5",
        "commit": "6ddd650208a77677ab86af9dfccc3a69b1ba8d32"
      },
      "accounts-entry": {
        "git": "https://github.com/Differential/accounts-entry.git",
        "tag": "v0.7.3",
        "commit": "7facaa045d3720eeeba3420c28e48d5709188fe3"
      },
      "captcha": {
        "git": "https://github.com/andi-bute/captcha-meteor.git",
        "tag": "v0.0.7",
        "commit": "d1f2e1f8de2ec1cfb6f8769b82f2accd610e6c92"
      },
      "roles": {
        "git": "https://github.com/alanning/meteor-roles.git",
        "tag": "v1.2.10",
        "commit": "7ccb35de0a6cb0c9a0c3666badd04757e39c09a6"
      },
      "fastclick": {
        "git": "https://github.com/percolatestudio/meteor-fastclick",
        "tag": "v0.6.7",
        "commit": "fcb3bfd34d9f6874e626b4e24e8f54107938db41"
      },
      "timesync": {
        "git": "https://github.com/mizzao/meteor-timesync.git",
        "tag": "v0.2.1",
        "commit": "fa4abd511f4e32a3c5d22795ce2c1e8369428fac"
      },
      "blaze-layout": {
        "git": "https://github.com/EventedMind/blaze-layout.git",
        "tag": "v0.2.4",
        "commit": "b40e9b0612329288d75cf52ad14a7da64bb8618f"
      },
      "inject-initial": {
        "git": "https://github.com/gadicc/meteor-inject-initial.git",
        "tag": "v0.0.8",
        "commit": "90f2fbcc5b4bc17fa4d4535f47813e31d86033b4"
      },
      "accounts-t9n": {
        "git": "https://github.com/softwarerero/meteor-accounts-t9n.git",
        "tag": "v0.0.5",
        "commit": "ad9539a8818049d5d9fa050d8b2a1f62706483b1"
      },
      "npm": {
        "git": "https://github.com/arunoda/meteor-npm.git",
        "tag": "v0.2.6",
        "commit": "177ab6118de5bf8cffb19481343d5762ff7a2aaf"
      }
    }
  }
}

Answer 1

这不是“特异性顺序”问题，而是特异性问题。这是来自 www.cssspecificity.com 的图例的相关部分:

• x-0-0:ID选择器的个数
• 0-x-0:类和属性的个数，以及伪选择器
• 0-0-x:类型(元素)和伪元素的个数

所以，你有:

• input[type="text"]:元素和属性选择器 - 0-1-1
• .form-control: 一个类:0-1-0

因此，不管它们的顺序如何，input[type="text"] 总是会赢。如果要覆盖，您需要添加一些自定义样式。