Css 如何为输入[类型=复选框]创建不同的样式？

此响应非常出色地向您展示了如何在页面上设置复选框的样式：

…尽管输入[type=checkbox]将其样式应用于所有复选框

我想合并两个不同复选框的图像——我们分别称之为facebook和twitter。因此，我需要独立设置它们的样式，因为它们都有不同的图像，单击时也有不同的图像

对于下面的代码，第一个复选框的效果非常好

风格：

 input[type=checkbox] {
 display:none;
 }

 input[type=checkbox] + label
 {
  background-image:url(facebook_active.png);
 height: 53px;
 width: 77px;
 display:inline-block;
 padding: 0 0 0 0px;
 }
 input[type=checkbox]:checked + label
 {
 background-image:url(facebook_inactive.png);
 height: 53px;
 width: 77px;
 display:inline-block;
 padding: 0 0 0 0px;
 }

复选框：

 <input type='checkbox' name='facebook'  id="facebook"><label for="facebook"></label> 

 <input type='checkbox' name='twitter' id="twitter"><label for="twitter"></label> 

---

我的问题是，我如何设计第二个复选框（Twitter），就像我设计Facebook复选框一样。有没有一种方法可以针对个别产品进行专门设计，这样我就可以独立设计它们了

使用ID区分这两个复选框。顺便说一句，这是非常基本的css

输入[类型=复选框]{
显示：无；
}
输入[类型=复选框]+标签{
高度：53px；
宽度：77px；
显示：内联块；
填充：0；
}
#facebook+标签{
背景图片：url（facebook_active.png）；
}
#twitter+标签{
背景图片：url（twitter_active.png）；
}
#facebook：选中+标签{
背景图片：url（facebook_inactive.png）；
}
#twitter：选中+标签{
背景图片：url（twitter_inactive.png）；
}

---

使用ID区分这两个复选框。顺便说一句，这是非常基本的css

输入[类型=复选框]{
显示：无；
}
输入[类型=复选框]+标签{
高度：53px；
宽度：77px；
显示：内联块；
填充：0；
}
#facebook+标签{
背景图片：url（facebook_active.png）；
}
#twitter+标签{
背景图片：url（twitter_active.png）；
}
#facebook：选中+标签{
背景图片：url（facebook_inactive.png）；
}
#twitter：选中+标签{
背景图片：url（twitter_inactive.png）；
}

---

单击下面代码段中的图像以查看切换

输入[类型=复选框]{
显示：无；
}
#facebook+标签{
背景图像：url（“https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRvizk1rdyu1GCcYVDH0rQJtFNwo5lKkICU8Q5byYMAhWslC2uWfw");
高度：53px；
宽度：77px；
显示：内联块；
填充：0像素；
背景尺寸：包含；
背景重复：无重复；
}
#facebook：选中+标签{
背景图像：url（“https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQTnxDwiDgiIn3IxkbO2d5dzR4F27MtO1JeYmNjJDCZ8JZtzDQmTA");
高度：53px；
宽度：77px；
背景重复：无重复；
背景尺寸：包含；
显示：内联块；
填充：0像素；
}
#twitter+标签{
背景图像：url（“https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-I0NSWnxixl0kga3832GIQZYJT7XPHC78AHCB12NG-jvV7u1SA”）；
高度：53px；
宽度：77px；
显示：内联块；
填充：0像素；
背景尺寸：包含；
背景重复：无重复；
}
#twitter：选中+标签{
背景图像：url（“https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRE0GIa1464BUBgLWNNLtqGRsqkWFSGHOgcBxn_qAO5HJuXEVcvMA");
高度：53px；
宽度：77px；
背景重复：无重复；
显示：内联块；
填充：0像素；
}

---

单击下面代码段中的图像以查看切换

输入[类型=复选框]{
显示：无；
}
#facebook+标签{
背景图像：url（“https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRvizk1rdyu1GCcYVDH0rQJtFNwo5lKkICU8Q5byYMAhWslC2uWfw");
高度：53px；
宽度：77px；
显示：内联块；
填充：0像素；
背景尺寸：包含；
背景重复：无重复；
}
#facebook：选中+标签{
背景图像：url（“https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQTnxDwiDgiIn3IxkbO2d5dzR4F27MtO1JeYmNjJDCZ8JZtzDQmTA");
高度：53px；
宽度：77px；
背景重复：无重复；
背景尺寸：包含；
显示：内联块；
填充：0像素；
}
#twitter+标签{
背景图像：url（“https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-I0NSWnxixl0kga3832GIQZYJT7XPHC78AHCB12NG-jvV7u1SA”）；
高度：53px；
宽度：77px；
显示：内联块；
填充：0像素；
背景尺寸：包含；
背景重复：无重复；
}
#twitter：选中+标签{
背景图像：url（“https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRE0GIa1464BUBgLWNNLtqGRsqkWFSGHOgcBxn_qAO5HJuXEVcvMA");
高度：53px；
宽度：77px；
背景重复：无重复；
显示：内联块；
填充：0像素；
}

您是否尝试按ID选择它

input[type=checkbox]#twitter+label

并在那里应用twitter图像？如果已经使用了id，则无需指定元素和属性。是否尝试按id选择它<代码>输入[类型=复选框]#推特+标签并在那里应用推特图像？如果您已经使用了id，则无需指定元素和属性。您不断重复相同的CSS规则。查看OP声誉……我这样做是有原因的……让他消化和优化我编写的CSS代码……现在您看到+15了吗？您不必为OP负责只有这只是一个糟糕的代码，你甚至故意这样做，以获得15分。哈哈。我希望有一天你会明白这么做的目的。#twitter+label，#facebook+label{高度：53px；宽度：77px；背景重复：不重复；背景大小：包含；显示：内联块；填充：0px；}你一次又一次地重复同样的CSS规则。看看OP的声誉……我这样做是有原因的……为了让他消化和优化我写的CSS代码……现在你看到+15了吗？你不仅仅回答OP。这只是一个糟糕的代码，你甚至故意这样做，以获得15分。哈哈。我希望有一天你会明白这么做的目的。#twitter+label，#facebook+label{高度：53px；宽度：77px；背景重复：不重复；背景大小：包含；显示：内联块；填充：0px；}