3 标签样式设置小结标签层级的构建逻辑我们在前文中已经解释过了，基本的逻辑就是分层再分层（虽然禁止套娃，但是有些情况下，

标签层级的构建逻辑我们在前文中已经解释过了，基本的逻辑就是分层再分层（虽然禁止套娃，但是有些情况下，为了模块话，套娃不可避免）

我们以一个例子来展示如何针对模块化的标签进行样式设计

写一个多层嵌套的标签模块

<div class="main">
  <div class="contest">
    <div class="day">日赛</div>
    <div class="week">周赛</div>
    <div class="month">月赛</div>
  </div>
</div>

设置最外层模块样式

我们给它画个红边、填充个绿色，设置一下宽高，另外再给它设置一下圆角以及位置，顺便把其中的文字居个中（此操作会将所有的文字低都居中）

body {
  margin: 0;
}

.main .contest {
  border: 2px solid #ff6e06;
  background-color: rgb(119, 213, 142);

  border-radius: 10px;
  position: absolute;
  top: 20%;
  height: 100px;
  width: 100%;

  text-align: center;
}

3 . 给文字设置样式

在上面我们仅针对最外层的模块进行设计，对文字几乎没有做调整，但是调整的逻辑都是一样的，只不过模块和文字的部分属性不同而已。我们之所以为文字设置了模块，目的是为了更精细的控制

现在我们便对它们进行调整，先对它们调个色，然后再调整一下位置，再调整一下字号

.main .contest .day {
  color: #ff0000;
  font-size: 20px;
  position: absolute;
  top: 20%;
  left: 15%;
}

.main .contest .week {
  color: #00ff3c;
  font-size: 20px;
  position: absolute;
  top: 40%;
  left: 43%;
}

.main .contest .month {
  color: #ffee00;
  font-size: 20px;
  position: absolute;
  top: 60%;
  left: 75%;
}