css:disabled ::不工作后

Question

似乎无法让以下选择器工作.

难道我做错了什么？

   html body div#main_container form#account_info input[type=text]:disabled::after, input[type=email]:disabled::after {
     content: "dfjnsfnj";
     position: absolute; float: none; clear: both; display: block;
     top: 0; left: 0;
     width: 100px; height: 100px; margin: 0; padding: 0;

     font-family: "Open Sans", sans-serif; font-weight: 600; font-size: 25px; line-height: 25px; text-align: left;
     letter-spacing: -3px;
     color: #3d5a71;
     background-color: red;
   }

Answer 1

虽然我确认该构造在当前的Chrome稳定版中确实有效,但这似乎是通用解析的一个不幸的副作用.

input是在标准HTML5指定为具有"空"的内容模型,像其他自闭合元件,如<br>和<img>.因此,在任何情况下,所有这些都不允许具有子元素.包括伪元素.

通过包含一些额外的标记可以很容易地解决您的问题,这会将生成的内容插入到doctree中比在复选框的子元素更合理的位置.以下示例工作正常,语义正确:

input:disabled[type=checkbox] + label:after {
  content:' testing this CSS';
}

<input disabled type="checkbox">
<label>Checkbox for</label>