html - 尝试将不同的 CSS 类分配给单选按钮的输入标签

Question

我正在尝试更新我用于足球精选的网站。

目前，我让人们通过 radio 调查提交对 16 款游戏的选择。

我正在尝试用图像按钮系统替换标准标签和单选按钮组合。我将有一张包含所有 32 支足球队的工作表，每支球队 3 张图像(正常、悬停和单击)，CSS 将从该文件绘制以显示每个按钮。

所以我的问题是我不确定解决此问题的最佳方法。

我能够找出并放置一个按钮，但我是否需要为主场和客场的每支球队分配一堆不同的类别？

到目前为止，我在 HTML 上有:

<input class="ARIaway" type="radio" id="game1_0" name="ARI" value="ARI">
<label for="game1"><span></span></label>
<input class="NOhome" type="radio" id="game1_1" name="NO" value="NO">
<label for="game1"><span></span></label>

所以那将是与 ARI @ NO 的一场比赛。我写的 CSS 是:

input[type="radio"] {
    display:none;
}
input[type="radio"] + label span {
    display:inline-block;
    width:300px;
    height:50px;
    vertical-align:middle;
    cursor:pointer;
    background-image: url(TeamsButtons/ARIaway.png);
    background-repeat: no-repeat;
    background-position: left top;
}

input[type="radio"]:hover +label span {
    background-image: url(TeamsButtons/ARIaway.png);
    background-repeat: no-repeat;
    background-position: left center;
}

input[type="radio"]:checked + label span {
    background-image: url(TeamsButtons/ARIaway.png);
    background-repeat: no-repeat;

    background-position: left bottom;
}

此代码使 ARIaway 按钮正确显示，但我被卡住了，因为我在想如果我对其他按钮使用类似的代码，它不会起作用，因为它会应用于所有输入标签，而且它们都会是相互竞争。

标签是否像:

input[type="radio"][class="ARIaway"]

一起工作

input[type="radio"][class="NOhome"]

?

Answer 1

让我们添加一个新样式，比如 .cool radio button。

input.cool[type="radio"] {
 	display:none;
}
input.cool[type="radio"] + label {
	display:inline-block;
	width:300px;
	height:50px;
	vertical-align:middle;
	cursor:pointer;
	background-image: url(TeamsButtons/ARIaway.png);
	background-repeat: no-repeat;
	background-position: left top;

	/* dummy for testing */
	background-image: url("http://cdn.sstatic.net/img/share-sprite-new.png");
	background-color: #AAA;
}

input.cool[type="radio"] + label:hover {
	background-position: left center;
	background-color: #FAA;
}

input.cool[type="radio"]:checked + label {
	background-position: left bottom;
	background-color: #AFA;
}

<input class="ARIaway cool" type="radio" id="game0" name="ARI" value="ARI">
<label for="game0"><span>ARIaway</span></label>
<input class="NOhome cool" type="radio" id="game1" name="ARI" value="NO">
<label for="game1"><span>NOhome</span></label>