Question

在选中该复选框并且没有找到解决方案时，我尝试了多种方法来更改图像边框的颜色。我开始怀疑是否有可能。

.thumbs { 
	list-style:none; 
	margin:0; 
	padding:0.3em 0; 
	text-align:center; 
	color:#fff; 
}
	
.thumbs li  {
	position:relative;
	display:inline-block;
    margin:0.2em;
	border:0.30em solid #000000 ;
	border-radius:0.3em;
}
	
.thumbs li:hover { border-color: #59b359; }
	
input[type=checkbox]:checked + .thumbs li { border-color: #ff0000; }

<form  id="formdelete">
	
	<ul class="thumbs">
	
	<li class="img">
			<label for="SNAP_CH01.jpg">
			<img src="SNAP_CH01.jpg" title="CH1">	
            
			<input type="checkbox" name="todelete[]" value="SNAP_CH01" id="SNAP_CH01.jpg">	
	</li>
	
	<li class="img">
			<label for="SNAP_CH02.jpg">
			<img src="SNAP_CH02.jpg" title="CH2">	
            </label> 
			<input type="checkbox" name="todelete[]" value="SNAP_CH02" id="SNAP_CH02.jpg">	
	</li>

	<li class="img">
			<label for="SNAP_CH03.jpg">
			<img src="SNAP_CH03.jpg" title="CH3">	
            </label> 
			<input type="checkbox" name="todelete[]" value="SNAP_CH03" id="SNAP_CH03.jpg">
	</li>
	
</form>

选中此复选框时，边框应为红色

编辑：

我找到了使用the link的解决方案：

我必须更改复选框的顺序，但工作正常：

    <ul class="thumbs">

<li class="img">
        <input type="checkbox" name="todelete[]" value="SNAP_CH01" id="SNAP_CH01.jpg">      
        <label for="SNAP_CH01.jpg">
        <img src="SNAP_CH01.jpg" title="CH1">
        </label>

</li>

label > img {
    display: block;
    border: 3px solid #000000 ;
}

input[type=checkbox]:checked + label > img { border: 3px #FF0000 solid ;}

Answer 1

因此，相邻的兄弟选择器+ https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator将在之后所引用的元素之后立即定位该元素。

在您的代码中，input[type=checkbox]:checked + .thumbs li会在复选框后立即寻找一个大拇指类。在这种情况下，.thumbs是（大）父UL项目的名称。

CSS中最重要的字母是C-级联。样式在DOM树中向下移动，您将需要创造性的方式来影响上面的内容。

选中复选框更改CSS

1 个答案: