如何在 CSS 中使用 contentEditable = true select 元素？

Question

我正在尝试使用 contentEditable = "true" 设置元素样式（元素是 table 单元格，如果有任何变化）。我试过使用 td[contenteditable]、td[contenteditable=true]、td[contenteditable="true"] 和 none，它们都有效。是否有这些选择器，或者我必须使用 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 相关的任何错误.

如何在 CSS 中使用 contentEditable = true select 元素？

How do I select elements with contentEditable = true in CSS?

html

css