1

我有一个core-menu包含一对paper-item的。

图片

我正在尝试删除core-menu边距，但将其设置为 0 无济于事。我怎样才能删除它？

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <script src="packages/web_components/platform.js"></script>
    <script src="packages/web_components/dart_support.js"></script>

    <link rel="import" href="packages/core_elements/core_menu.html">
    <link rel="import" href="packages/paper_elements/paper_item.html">

    <style>
        html, body {
            height: 100%;
            margin: 0;
        }

        core-menu {
            margin: 0;
        }
        paper-item {
            background-color: #00ff00;
        }
    </style>
  </head>
  <body>
    <core-menu>
      <paper-item label="One"></paper-item>
      <paper-item label="Two"></paper-item>
    </core-menu>
    <script type="application/dart">export 'package:polymer/init.dart';</script>
</body>

4

1 回答 1

1

The selectivity of your selector used to change the value must be higher than the selectivity of the selector used to set the original value.

I was able to remove the margin using

core-menu#menu {
  margin: 0;
}

<core-menu id="menu">
  <paper-item label="One"></paper-item>
  <paper-item label="Two"></paper-item>
</core-menu>

For testing purposes you can also use !important

core-menu {
  margin: 0 !important;
}

but it is strongly advised not to use it in production if you don't have to.
It makes your CSS hard to maintain.

For more details see https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

于 2014-09-08T13:53:59.907 回答