html - 如何在 CSS 中选择 contentEditable = true 的元素？

Question

我正在尝试使用 contentEditable = "true"设置元素的样式(如果发生任何变化，元素就是表格单元格)。我试过使用 td[contenteditable]、td[contenteditable=true]、td[contenteditable="true"]，但都没有他们工作。是否有针对这些的选择器，或者我必须使用 JavaScript 吗？

这是 HTML:

<table class="table table-bordered">
  <thead>
    <th>content</th>
    <th>editable content</th>
    <th>content</th>
  </thead>
  <tr>
    <td>Lorem ipsum</td>
    <td contenteditable="true">I'm editable!</td>
    <td>Lorem ipsum</td>
  </tr>
  <tr>
    <td>Lorem ipsum</td>
    <td contenteditable="true">I'm editable!</td>
    <td>Lorem ipsum</td>
  </tr>
  <tr>
    <td>Lorem ipsum</td>
    <td contenteditable="true">I'm editable!</td>
    <td>Lorem ipsum</td>
  </tr>
</table>

Answer 1

如果您在一行前使用四个空格，它将被格式化为文本。将您的答案添加到第一行以使其更好一些。

使用您的示例 HTML 代码选择器 td[contenteditable="true"] should work .

如果您使用的是较旧的浏览器，可以解释为什么它无法正常工作。虽然this建议您必须使用 IE6，因为 CSS 2.1 现在已得到广泛支持。

如果您还没有这样做，请检查您的浏览器调试控制台(大多数现代浏览器都可以通过按 F12 来使用它)并查找与 CSS 相关的任何错误。