html - 为什么不应用这些样式？

Question

我有这个 CSS:

.custom-gauge.wj-gauge {
  padding: 0px 10px;
}
.custom-gauge.wj-gauge .wj-face path {
  fill: #d0d0d0;
  stroke: none;
}
.custom-gauge.wj-gauge .wj-pointer path {
  fill: #404040;
  stroke: none;
}
.custom-gauge.wj-gauge circle.wj-pointer {
  fill: #404040;
  stroke: none;
  transform-origin: center center 0px;
  transform: scale(1);
  transition: transform .5s;
}
.custom-gauge.wj-gauge.wj-state-focused circle.wj-pointer {
  fill: red;
  stroke: black;
  stroke-width: 2px;
  transform: scale(1.3);
  transition: transform 1s, fill 0.5s, stroke 0.5s;
}

和这个 html:

    <div class="custom-gauge p-x">
        <wj-linear-gauge value.bind="currentProgram.progress" class="au-target" au-target-id="97">
        <div ref="element" class="au-target wj-control wj-gauge wj-lineargauge" au-target-id="95" tabindex="0"><div wj-part="dsvg" style="width:100%;height:100%">   
        <svg wj-part="svg" width="100%" height="100%" style="overflow:visible">
        <defs>
        <filter wj-part="filter" id="wj-gauge-filter-1"><feOffset dx="3" dy="3"></feOffset><feGaussianBlur result="offset-blur" stdDeviation="5">        </feGaussianBlur><feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"></feComposite><feFlood flood-color="black" flood-opacity="0.2" result="color"></feFlood><feComposite operator="in" in="color" in2="inverse" result="shadow"></feComposite><feComposite operator="over" in="shadow" in2="SourceGraphic"></feComposite></filter></defs><g wj-part="gface" class="wj-face" style="cursor:inherit"><path wj-part="pface" filter="url(#wj-gauge-filter-1)" d="M 48 0 L 264 0 L 264 19 L 48 19 Z"></path></g><g wj-part="granges" style="cursor:inherit"></g><g wj-part="gpointer" class="wj-pointer" style="cursor:inherit"><path wj-part="ppointer" d="M 48 0 L 156 0 L 156 19 L 48 19 Z" filter="url(#wj-gauge-filter-1)"></path></g><g wj-part="gcover" style="cursor:inherit"><circle wj-part="cvalue" class="wj-pointer wj-thumb" cx="156" cy="9.5" r="16"></circle><text wj-part="value" class="wj-value" x="146.3906" y="14.5">50</text><text wj-part="min" class="wj-min" x="38.125" y="15.5">0</text><text wj-part="max" class="wj-max" x="268" y="15.5">100</text></g></svg></div></div>
        </wj-linear-gauge>
    </div>

但是，没有应用任何样式。

我已验证该 css 正在页面上加载。

问题是什么？

Answer 1

您需要在 css 中的句点之前放置空格。

.custom-gauge.wj-gauge {
  padding: 0px 10px;
}
.custom-gauge.wj-gauge .wj-face path {
  fill: #d0d0d0;
  stroke: none;
}

应该是:

.custom-gauge .wj-gauge {
  padding: 0px 10px;
}
.custom-gauge .wj-gauge .wj-face path {
  fill: #d0d0d0;
  stroke: none;
}

等等

a working jsfiddle.