CSS有选择地应用样式

我想创建一个编辑器页面，允许您预览HTML文件。CSS有选择地应用样式

的问题然而，该编辑风格正在预览HTML文件，例如继承：

<div class="header"> 
    <div class="top"> 
     Editing HTML page - page1.html 
    </div> 
</div> 

<div class="preview"> 
    <div class="header"> 
     <div class="top"> 
      Page 1.html 
     </div> 
    </div> 
</div>

我知道周围的工作是使用一个IFRAME，但我宁愿不这样做因为我将允许拖放功能。

一个CSS的解决方案将是巨大的，我确实有使用jquery的类添加到每个项目中的“预览”区域，并使用以下的CSS编辑器页面的想法：

.header:not(.preview) { 
    background-color:#000; 
} 

.top:not(.preview) { 
    color: #fff; 
}

这然而，这似乎是一个拙劣的解决方案，如果有一个更好的解决方案，这将是非常棒的！

来源

2013-10-31 kiwijus

如果最终需要使用not，你应该反转您的选择：

:not(.preview) > .header { background-color:#000; } 
:not(.preview) > .header .top { color: #fff; }

但最好在一些其他的方式来设计选择

来源

2013-10-31 22:56:29 kirilloid

CSS有选择地应用样式

回答

相关问题