Question

所以我试图将所有上页的空白和边距设置为0，然后在需要时分别向元素添加空白和边距，这就是为什么我想覆盖通用设置的颜色和空白选择器*，但它不起作用，所有内容都保持深粉色，并且页边距也没有变化，请提供帮助。

 1. 10.8.2.85:50052 (port is what i am giving in gRPC server)
 2. 10.8.2.88:50052 (port is what i am giving in gRPC server)

/*------------------------All Margin & Padding-------------------------*/

.upperPart {
  margin: 0px;
  padding: 0px;
  background-color: darksalmon;
}

.upperPart * {
  margin: 0px;
  padding: 0px;
  background-color: deeppink;
}

body {
  margin: 0px;
  padding: 0px;
}

/*-----------------------------------Colors-------------------------*/

header {
  background-color: darkolivegreen;
}

h1,
h2,
h3 {
  background-color: mediumspringgreen;
}

nav {
  background-color: teal;
}

ul {
  background-color: magenta;
}

li {
  background-color: yellow;
  margin: 5px;
}

li {
  background-color: blue;
  margin: 2px;
}

div {
  background-color: brown;
}

section {
  background-color: lightsteelblue;
}

nav ul {
  list-style-type: none;
  display: flex;
  flex-direction: row;
}

Answer 1

CSS Specificity 。

因为您使用.upperPart * 来使样式为 null ，而不是使用* {}来进行争论，所以可以说是最好。
而且由于我们不应该使用!important（除非我们真的非常了解我们在做什么）...

您需要使用更具体的规则作为替代。即：

.upperPart header {
  background-color: darkolivegreen;
}

等等所有您的 null .upperPart后代元素（*）。

建议：

请勿直接设置TAG的样式（或将其设置为最小，页边距，字体大小，填充等）。
仅限样式的类或ID 。

/* QuickReset */
* {
  margin:0;
  box-sizing: border-box;
  padding: 0;
}

/* DEFAULT STYLES FOR TAGS */

h1,
h2,
h3 {
  /* Keep it minimal */
}

nav {
  /* Keep it minimal */
}

ul {
  /* Keep it minimal */
  list-style-type: none;
  display: flex;
  flex-direction: row;
}

li {
  /* Keep it minimal */
}

/* STYLES FOR SPECIFIC CLASSES */

.upperPart {
  background-color: darksalmon;
}

/* ...Etc... */

<div class="upperPart">
  <header>
    <h1>Untitled</h1>
    <img src="" alt="logo" name="logo" />
    <h3>description in form of a slogan</h3>
  </header>
  <nav>
    <ul>
      <li>Home</li>
      <li>Shops and Products</li>
      <li>Find Work/Worker</li>
      <li>New Shops</li>
      <li>Contact</li>
    </ul>
  </nav>
  <div>
    <form method="post" action="searchAppPhp.php">
      <label>Search </label>
      <input type="text" id="search" size="50" />
      <input type="submit" name="search">
    </form>
  </div>
</div>
<div class="middlePart">
  <section>
    <article>
      <p>ARTICLE HERE</p>
    </article>
  </section>
</div>
<div class="downPart">
  <footer>
    <p>FOOTER HERE</p>
  </footer>
</div>

如何覆盖通用选择器*？

1 个答案:

建议：