nth-of（）：在与Edge和Safari

Question

我目前遇到的问题是，以下内容适用于Google Chrome和Internet Explorer但不适用于Safari和Microsoft Edge，出于某种原因，这两种风格尚未应用。

.legend-content ul li:nth-of-type(1):before{
color: #00b36a;
}
.legend-content ul li:nth-child(2):before{
    color: #ff9600;
}
.legend-content ul li:nth-child(3):before{
    color: #00ade5;
}
.legend-content ul li:nth-child(4):before{
    color: #d3cfd0;
}

On Edge the stlye isn't being applied，但Chrome也没关系。

我已经尝试过四处寻找，但未发现这些浏览器存在任何兼容性问题（并且不知道为什么Edge会失败，但IE不会）。那么我将如何在所有浏览器中获得this这样的结果？

我还应该提到列表没有样式，每个li之前的元素是：

.legend-content ul li:before{
    content: '◼ ';
    font-size:18px;
} 

Answer 1

如果content没有存储任何文本值，并且content属性在{{1}中放置color属性时，您应始终使用content:"text"属性以及所需的其他属性所有pseudo css element代码如下所示，并且它正常工作。请添加并检查。

.legend-content ul li:before{
   content: "■";
   font-size:18px;
}
.legend-content ul li:nth-of-type(1):before{
   color: #00b36a;
}
.legend-content ul li:nth-child(2):before{
  color: #ff9600;
}
.legend-content ul li:nth-child(3):before{
  color: #00ade5;
}
.legend-content ul li:nth-child(4):before{
  color: #d3cfd0;
}

请参阅下面附带的图片链接： https://i.stack.imgur.com/k6tmR.png

Answer 2

I am not able to repreoduce the issue，在Edge 15或16中，虽然我必须稍微修改它以包含要呈现的内容块

.legend-content ul li:before {
  content: 'number ';
}

您发布的屏幕截图也是当您的规则比该规则更具体时会发生的情况。你可能有一个基于边缘特定或基于modernizr的css规则，这是最重要的。不受支持的规则如下所示