Question

通过使用下面的代码，我想在h1和h2标签上应用相同的css效果。

HTML

<div class="blog_content_snippet">
    <h1 contentEditable="true" data-text="Enter text here h1"></h1>
    <h2 contentEditable="true" data-text="Enter text here h2"></h2>
</div>

CSS

.blog_content_snippet h1,h2:empty:not(:focus):before{
    content:attr(data-text)
 }

http://jsfiddle.net/cmta3bu5/6/

使用一个css我想申请两者，任何人都有想法??

Answer 1

声明他们两个

.blog_content_snippet h1:empty:not(:focus):before,    
.blog_content_snippet h2:empty:not(:focus):before{
    content:attr(data-text)
}

EXAMPLE 1

或者您可以随时创建一个class并将其添加到您想要的任何元素中：

<强> HTML

<div class="blog_content_snippet">
   <h1 class="content" contentEditable="true" data-text="Enter text here h1"></h1>
   <h2 class="content" contentEditable="true" data-text="Enter text here h2"></h2>
</div>

<强> CSS

.content:empty:not(:focus):before{
    content:attr(data-text)
}

EXAMPLE 2

Answer 2

这可能会对您有所帮助：

.blog_content_snippet h1:empty:not(:focus):before,
.blog_content_snippet h2:empty:not(:focus):before {
    content:attr(data-text)
}

对不同元素应用相同的效果

2 个答案: