CSS3 选择器问题答案

【问题标题】：CSS3 Selector ProblemCSS3 选择器问题
【发布时间】：2012-04-07 11:15:01
【问题描述】：

我不知道为什么会这样：

input[ type = "text" ]:last-of-type:focus{ border:1px solid red; }

但这不起作用：

input[ type = "checkbox" ]:last-of-type:checked{ border:1px solid red; }

“border”属性只是一个例子，任何其他属性也被忽略了！

【问题讨论】：

你用什么浏览器测试过这个？您是否首先检查过是否可以在该浏览器中的复选框上设置边框？你的标记是什么样的？
Mozilla Firefox、IE、Chrome、Safari、Opera；这只是一个例子，伙计！您可以测试任何属性，而不仅仅是边框！没有属性是通过第二个代码完成的！
stackoverflow.com/questions/2460501/…

标签： css checkbox css-selectors pseudo-class

【解决方案1】：

给定：

<!DOCTYPE HTML>
<meta charset="utf-8"/>
<title>Testing</title>
<style>
input[ type = "checkbox" ]:last-of-type:checked{ top: 100px;  }
input[type='checkbox'] { position: absolute; top: 200px; }
</style>
<h1>Testing</h1>
<form>
        <input type="submit" />
        <input type="checkbox" />
</form>

对我来说，它在 Chrome 中完美运行。大概您没有尝试使用您正在测试的浏览器中的复选框上尊重的任何属性。

【讨论】：

最好改一下我的问题，为什么“Style”的第三行不起作用： Testing <style> input[ type = "checkbox" ]{display:none} input[ type = "checkbox" ]:last-of-type:checked + label{color:red; } 输入[ type = "checkbox" ]:last-of-type:checked ~ p{color:red; } </style> <form> <input type="checkbox" id="c1"><label for="c1">Check1</label> <input type="checkbox" id="c2">Check2 <p>你好！</p> </form>
你的意思是，你看到红色的
标签，通过点击第二个标签？！！
@BiJO0L，好的，可以在 Firefox 中使用，但不能在 chrome 中使用...我之前在第二个复选框中添加了选中，因此 chrome 使用初始选中值来确定 p 标签的样式，但是不会在复选框状态更改时更新它。听起来像是要报告的错误。