css - 仅将 normalize.css 应用于页面上的组件？

Question

我正在尝试使用 css 向导类型 component我发现:

.wizard li {
  background-color: #E4E4E4;
  border-radius: 5px;
  display: inline;
  padding: 10px 30px 10px 40px;
  margin-right: -7px;
  width: auto;
}

.wizard li::before, .wizard li::after {
  border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
  border-color: transparent;
    border-left-color: #fff;
  border-radius: 10px;
}

.wizard li::before {
    border-width: 25px; 
  margin-top: -16px;
  margin-left: 84px;
}


.wizard li::after {
    border-left-color: #E4E4E4;
  border-width: 21px; 
  margin-top: -12px;
  margin-left: 24px;
}

.wizard li.selected {
  background-color: #FF4F65;
  color: #fff;
}

.wizard li.selected::after {
  border-left-color: #FF4F65;
}

.wizard li:last-child::after {
  border-left-color: transparent;
}

我想在不使用规范化/重置的大型网站上使用它。该组件似乎仅在您使用 normalize.css 时才起作用。有什么方法可以让我只在这个组件上使用 normalize.css 而不是整个页面？

Answer 1

如果您检查该元素，您会发现 font-family 导致了问题。

From normalize.css :

html {
  font-family: sans-serif; /* i'm causing it */
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

所以只需添加一些font-family到.wizard li，比如arial。

Check the codepen

或者，如果您正在使用一些自定义字体，则必须修改值(border-width、margin-top、margin-left) 用于伪元素(.wizard li::before 和 .wizard li::after)。