一些div与占位符

Question

我想在我的可编辑＆＃34; divs＆＃34;中创建一个占位符。我有一些像这样的div：

<div id="introDatos" class="test marco-cabecera" contenteditable="true" placeholder="Escribe aquí los datos...">

<div id="introNumeros" class="test marco-cabecera" contenteditable="true" placeholder="Escribe aquí los números...">

我的CSS就是：

 .test {
    border: 1px #e4e4e4 solid;
    padding: 25px 20px;
}

.test[placeholder]:empty:before {
    content: attr(placeholder);
    color: #555; 
    opacity: 0.3;
}

它的效果差不多。关键是它默认只显示第一个div的占位符。我需要单击下一个div来查看其占位符。

知道我做错了什么吗？有什么建议以另一种方式做到吗？

谢谢！

Answer 1

<强> Demo

CSS

直接应用css中的数据属性，即不使用div的类或id。

[contentEditable="true"] {
    border: 1px #e4e4e4 solid;
    padding: 25px 20px;
}
[contentEditable="true"]:empty:not(:focus):before {
    content:attr(data-placeholder);
    color: #555;
    opacity: 0.3;
}