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稳定版中确实有效，但这似乎是通用解析的不幸副作用。

<br> specified in the HTML5 standards具有“空”内容模型，与<img>和input:disabled[type=checkbox] + label:after { content:' testing this CSS'; }等其他自闭元素一样。因此，所有这些都不允许在任何情况中拥有子元素。包括伪元素。

通过包含一些额外的标记可以轻松解决您的问题，该标记会将生成的内容插入到doctree中更合理的位置而不是复选框的子元素。以下示例工作正常，语义正确：

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

File file = new File(ClassLoader.getSystemResource("com/path/to/file.txt").getFile());

Answer 2

因为它无法应用于input元素。

将其添加到label。现在工作：）！

html body div#main_container form#account_info input:disabled[type=text] + label:after, 
html body div#main_container form#account_info input:disabled[type=email] + label:after {}

css：disabled ::不工作后

2 个答案: