Javascript 带有jQuery事件处理程序的可交换CSS主题

我正在尝试使用jQuery事件处理程序创建一个简单的Swapale CSS主题。 如你所见，我可以修改.outer，但我不知道如何设置跨距的样式。默认主题不需要进一步定制，但我想更改跨距的颜色/大小，并为“mytheme”应用悬停效果等

HTML不应更改，但JS可以编辑。 非常感谢您的任何意见。如何将[data theme=“mytheme”]与其他元素一起使用

这是HTML：

<div class="outer" data-theme="default">
<ul class="list">
    <li><span>1</span></li>
    <li><span>2</span></li>
    <li><span>3</span></li>
    <li><span>4</span></li>
    <li><span>5</span></li>
    <li><span>6</span></li>
    <li><span>7</span></li>
    <li><span>8</span></li>
    <li><span>9</span></li>
    <li><span>0</span></li>
</ul>
<input type="button" value="Swap Theme" id="btnSwapTheme" />
</div>

CSS:

例如：

.outer[data-theme="mytheme"] span {
    background-color: green;
}
.outer[data-theme="mytheme"] span:hover {
    background-color: coral;
}

演示：

---

您只需在任何选择器前面加上

.outer[data-theme=“myteme”]

，因为这是用于包装元素的容器。

谢谢！我如何使用div.outer ul.list>li:nth child（3n+3）{背景色：蓝色；颜色：白色；}像这样

div.outer[data-theme=“myteme”]ul.list>li:nth child（3n+3）{背景色：蓝色；颜色：白色；}

.outer {
text-align: center;
}
.outer input {
margin: 0.5em;
}
.outer[data-theme="default"] {
background-color: #c0c0c0;
}

.outer[data-theme="mytheme"] {
background-color: red;
}

ul.list {
width: 13em;
margin: 0;
margin-left: auto;
margin-right: auto;
text-align: center;
padding: 0;
list-style-type: none;
text-align: center;
}
ul.list li {
display: inline-block;
font-weight: bold;
border: 1px solid blue;
margin: .5em;
}
ul.list li span {
display: inline-block;
height: 3em;
width: 3em;
line-height: 3em;
cursor: pointer;
}

.outer[data-theme="mytheme"] span {
    background-color: green;
}
.outer[data-theme="mytheme"] span:hover {
    background-color: coral;
}