是否可以选择css生成的内容？ [英] Is it possible to select css generated content?

问题描述

假设我已标记：

 < div data-generated =world！& / div> 
  

.. with CSS：

  div：after {
 content：attr（data-generated）; 
} 
  

这将产生文本：Hello world！ - ）关于生成的内容和I没有看到任何提及这个问题。

2）如果这个问题的答案是不可能 - 请链接到一个可信的来源，说明这一点。

---

编辑：

有些用户指出这是滥用数据属性。

好吧，可能在上面的例子中....但是我这样使用：

 < div data-commentcount =3>评论< / div> 
  

FIDDLE

...在javascript中设置data-commentcount属性。

这肯定是可接受的用法不是....否则

解决方案

不，你不能。

请参阅使用jQuery来处理CSS伪元素（例如：before和：after）。要重复那里描述的内容，生成的内容不是DOM的一部分。

以 CSS2.1 spec ，

生成的内容不会更改文档树。

生成的内容只存在于渲染引擎的视觉世界中。选择是关于选择DOM的部分。生成的内容不在DOM中，因此无法选择。出于同样的原因，无法选择生成的计数器或列表项目符号。

Let's say I have mark up:

<div data-generated="world!">Hello </div>

..with CSS:

div:after {
    content: attr(data-generated);
}

This produces the text: Hello world! - FIDDLE

BUT...

If I try to select / Copy the text - only the 'hello ' part is selectable.

Is there any way to select css generated text?

Note:

1) I have looked at the spec (here and here) regarding generated content and I haven't seen any reference to this issue.

2) If the answer to this question is 'no - it is not possible' - please link to a credible source which states this.

---

Edit:

Some users pointed out that this is misusing the data attributes.

Well, OK maybe in the above example.... but say I use it like this:

<div data-commentcount="3"> comments </div> 

FIDDLE

...where the data-commentcount attribute is set in javascript.

This surely IS an acceptable usage isn't it.... otherwise what would the attr() function be good for?

解决方案

No, you can't.

See Manipulating CSS pseudo-elements using jQuery (e.g. :before and :after). To repeat what is described there, generated content is not part of the DOM.

In the words of the CSS2.1 spec,

Generated content does not alter the document tree.

Generated content only exists in the visual world of the rendering engine. Selecting is about selecting portions of the DOM. Generated content is not in the DOM, hence cannot be selected. For the same reason, generated counters or list item bullets cannot be selected.

这篇关于是否可以选择css生成的内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！