小编Maf*_*ffe的帖子

我目前正在尝试通过更改其形状、背景颜色和悬停颜色来重新设计React 中的Fabric UI 按钮。我设法更改了前两个，但我仍然selectors无法访问悬停颜色，因为该属性似乎不起作用。

我的代码如下：

import React, { Component, Props } from 'react';
import { PrimaryButton as FluentPrimaryButton, IButtonStyles, IStyle} from 'office-ui-fabric-react';

interface MyPrimaryButtonProps {
  label?: string
}

const MyPrimaryButton = ({label}: MyPrimaryButtonProps) => {

  const styles: IButtonStyles = {
    root: [
      {
        fontSize: '16px',
        background: '#525CA3 ',
        border: '1px solid #525CA3',
        borderRadius: '20px',
        padding: '0px 30px',
        height: '40px',
        selectors: {                     //  <--- 
          ':hover': {                    //  <--- this part doesn't work.
            backgroundColor: 'red'       //  <---
          }, …

我有以下清单：

<ul id="objects-list">
   <li>Table</li>
   <li>Chair</li>
   <li>Window</li>
</ul>

使用以下 CSS（取自https://www.w3schools.com/howto/howto_css_bullet_color.asp）：

ul {
  list-style: none;
}

ul li::before {
  content: "\2022";
  color: red;
  font-weight: bold;
  display: inline-block; 
  width: 1em;
}

这会将默认列表标记更改为红色。一切正常，但是当我使用 Javascript 将新项目添加到列表中时

var objectsList = document.getElementById("objects-list");
var listItem = document.createElement("LI");
listItem.innerHTML = "Pen";
objectsList.appendChild(listItem );

它发生在我的 XHTML 文件中。它不会发生在 Stack Snippet 中。

该项目已正确添加到列表中，但根本没有标记。此外，当我在 Inspector 中检查新项目时，它根本没有显示“::before”元素。

有人可以解释我为什么吗？