更改内部标题元素 - 字体颜色

Question

我目前正致力于创建一个手风琴风格的元素，并且无法将点击元素中的字体颜色更改为white。任何人都可以帮助改变我的字体颜色而不是黑色到白色吗？

http://jsfiddle.net/rgs6vLub/13/

CSS：

.accordion h4 { padding-left: .5em; padding-bottom: .5em; color: white; }
                .accordion, .accordion * {
                margin:0;
                padding:0;
            }
        .accordion {
            background-color: #456db5;
            border-radius: 10px;
            padding: 10px 0;
        }
        .accordion dt {
            padding: 0.5em;
            background-color: white;
            cursor:pointer;
            border-bottom: 1px solid #8fcde5;
            font-size: 16px;
            color: black;
        }
        .accordion dt:hover {
            color: black;
        }
        .accordion .on {
            background-color: #456db5;
            cursor:default;
        }

        .accordion dt .on { color: white; }

        .accordion dt, .accordion .on:hover {
            color:black;
        }
        .accordion dd {
            padding-left: 1em;
            margin: 0 auto;
            padding-right: 0.5em;
            background-color: white;
            font-size: 16px;
        }
        /* NOTE:
         Do not apply top/bottom padding or margin to the accordion content,
         as its affects to the box model will cause the animation to be choppy.
         Instead, apply vertical spacing to the content elements.
         */
        .accordion dd p {
            padding-top:.5em;
            padding-bottom:.5em;
        }
        .accordion dt:last-of-type{
            border-bottom:none;
        }

Answer 1

使用此

.accordion .on {
      color: #fff !important;
    }

Answer 2

将.on样式编辑为color:white !important;而不是color:white