Question

我尝试使用复选框通过css创建产品选择。我的代码在这里

＆＃13;

.vfb-checkbox{
  width:180px;
  height:130px;
 background:url('http://i304.photobucket.com/albums/nn181/Amam_Dewan/2932337756_1845773ed4_q_d_zpsea5idhnt.jpg');
}
/* checkboxes */

.vfb-checkbox label {
		  cursor: pointer;
	    display: block;
	    position: relative;
  width:100%;
  height:100%;

	}
	
.vfb-checkbox label:before {  
	    content: "";
      height:100%;
      width:100%;
	    position: absolute;  
	    left: 0;
	}
.vfb-checkbox label:hover{
  background:rgba(0,0,0,.7) url(http://i304.photobucket.com/albums/nn181/Amam_Dewan/selected_zpsvfoaira0.png)center center no-repeat;
}

	
.vfb-checkbox input[type=checkbox] {  
    	display: none;
	}
	
	
   input[type=checkbox]:checked + label:before {  
	    background: rgba(0,0,0,.4) url('http://i304.photobucket.com/albums/nn181/Amam_Dewan/selected_zpsvfoaira0.png') center center no-repeat;  
	}

＆＃13;

<div class="vfb-checkbox">  
   
  <label for="check1"> 
    <input id="check1" type="checkbox" name="check" value="check1">
  </label>

</div>

＆＃13;

当我点击图片时，应该检查它但不起作用。当我设置标签标签后跟输入标签它正在工作，但我想要完全相同的html结构。

Answer 1

目前CSS中没有父选择器。

我可以选择css父元素吗？

1 个答案: