有没有可能用这个HTML让DIV标签在点击DIV标签时不勾选输入复选框标签？我是否可以添加任何CSS来实现这个功能？
<style>
#myId ~ label {
position: fixed;
overflow: auto;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: red;
}
#myId ~ label div {
width: 100%;
background-color: yellow;
height: 25%;
}
#myId:checked ~ label {
display: none;
}
</style>
<input id="myId" type="checkbox" />
<label for="myId">
<div>Hello</div>
</label>
实际上是 <label> 元素引起的问题；HTML是有线的，当你指定了 for 属性，它将其与标签上的 <input> 匹配的 name 或 id 属性。所以当你点击 标签，该复选框会发生变化。这是浏览器的默认功能。你可以删除 <label> 元素 <div>如果你想使用一些css，也可以这样做。
label {
pointer-events: none;
}
或者如果你不想覆盖所有标签的点击功能，你也可以这样做。
label > div {
pointer-events: none !important; /* disable from div */
}
label {
pointer-events: auto; /* enable only on label */
}
如果你想针对 只是 该标签，你可以做。
label[for=myId] {
pointer-events: none;
}
或
label[for=myId] > div {
pointer-events: none !important; /* disable for div */
}
label[for=myId] {
pointer-events: auto; /* enable for label */
}
如果你还想能够点击你的事件，但防止点击事件冒泡到父标签，这就叫 "停止传播"，可惜没有直接的CSS方法，你得用一些JavaScript。下面是一个例子。event.stopPropagation的文档
<body>
<input id='myId' type='checkbox' />
<label for='myId'>
<div id='label-div'>Hello</div>
</label>
<script>
var label = document.getElementById('label-div');
label.addEventListener('click', function(e) {
e.stopPropagation();
});
</script>
</body>
label {
pointer-events: auto;
border: 1px solid blue;
padding: 10px;
}
label > div {
pointer-events: none !important;
display: inline-block;
border: 1px solid red;
padding: 10px;
}<input type='checkbox' id='myId' />
<label for='myId'>
<div>Hello</div>
</label>#unclickable {
pointer-events: none !important;
border: 1px solid blue;
display: inline-block;
padding: 20px;
}
label {
pointer-events: all;
border: 1px solid red;
padding: 10px;
margin: 10px;
}<input type='checkbox' id='myId' />
<div id='unclickable'>
<label for='myId'>Hello</label>
</div>