Question

我下面无序列表中的项目符号显示为灰色，但我希望它们是白色的。

＆＃13;

* {
  z-index: 1;
}
body {
  margin: 0;
}
#product {
  height: 35em;
  background: #000;
  color: #fff;
}
#product ul {
  padding: 0;
}
#product ul li {
  height: 35em;
  width: 25%;
  float: left;
  background-color: red;
  position: relative;
}
#product p {
  position: relative;
  top: 40%;
  z-index: 15;
}
#product h1 {
  text-align: center;
}
#pos {
  position: absolute;
  z-index: 3;
  background-color: rgba(0, 0, 0, 1);
}
#ovrl {
  background: rgba(0, 0, 0, .5);
  height: 35em;
  width: 100%;
  position: absolute;
  z-index: 2;
}

＆＃13;

<div id="product">
  <div id="pos">
    <h1>Why Choose Us</h1>
    <hr>
  </div>
  <ul>
    <li>
      <p>Customized
        <br>Software</p>
    </li>
    <li>
      <p>Workshop</p>
    </li>
    <li>
      <p>Digital
        <br>Advertising</p>
    </li>
    <li>
      <p>E-learning</p>
    </li>
  </ul>
  <div id="ovrl"></div>
</div>

＆＃13;

当我从position: relative选择器中删除#product ul li时，文字全白，但代码文字中的文字不是白色。

当我只从z-index: 1选择器中移除*时出现了另一个问题，那么它也可以正常工作。

但我无法理解为什么。我需要帮助，请任何人解决我的问题。

Answer 1

首先，你在#product ul li中输入了一个拼写错误，试试这个：

#product ul li {
    position: relative;
}

此外，如果您想要将某些内容应用于整个DOM，请使用html标记

，而不是使用*。

html {
    z-index: 1;
}

希望有所帮助！对于未来，尽量避免在CSS上使用ID，在Javascript上使用CSS和Ids上的类通常被认为是一种好习惯。

删除位置或z-index属性时文本颜色会发生变化

1 个答案: