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是specified in the HTML5 standards具有“空” 内容模型，与其他自关闭元素(例如<br>)一样和 <img> .因此，在任何情况下都不允许有子元素。包括伪元素。

您的问题很容易通过包含一些额外的标记来解决，这些标记会将生成的内容插入到文档树中比作为复选框的子元素更合理的位置。以下示例工作正常并且在语义上是正确的:

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

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