css :empty, :blank 里面有注释

Posted 2023-03-06

【中文标题】css :empty, :blank 里面有注释

【英文标题】：css :empty, :blank with comment inside

【发布时间】：2017-01-18 23:49:57

【问题描述】：

我正在使用 :empty 和 :blank，它们工作正常，但我有一个案例，其中 angular 在 div 中注入 cmets，这些将不再起作用，在这种情况下我可以做些什么，所以 :empty 和 :空白可以与 cmets 一起使用吗？

【问题讨论】：

想提一下，和评论一起有一个空格。

【参考方案1】：

你可以做的事情很少......尝试看看：https://docs.angularjs.org/guide/production关注$compileProvider.debugInfoEnabled(false);......

通常不是一个好主意使用:empty（或其他东西）伪选择器来选择空元素因为选择器对所有内容都很敏感，包括空格。 有一个例子：

div 
  width: 30px;
  height: 30px;
  background: cyan;
  margin: 5px;


div:empty  display: none; 

<div>

</div>
<div> </div>

<!-- just this -->
<div></div>

已编辑

一种可能的解决方法是创建一个自定义指令来为您执行此操作，但是，当然，它应该手动添加到您想知道它们是否为空的元素中。这是一个例子：

angular
  .module('test', [])
  .directive('emptyClass', function() 
    return function postLink(iScope, iElement, iAttrs) 
      
      function updateOnChanges() 
        var classname = iAttrs.emptyClass;
        
        var hasContent = iElement.children().length > 0 ||
            iElement.text().trim().length > 0;
        
        if(hasContent) 
          return iElement.removeClass(classname);
        
        
        return iElement.addClass(classname);
      
      
      iElement[0].addEventListener(
        "DOMSubtreeModified", updateOnChanges, false
      );
      updateOnChanges();
    
  )
;

.is-empty  background: cyan; display: block; min-height: 20px; margin: 10px; 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<section ng-app="test">
  <h1 empty-class="is-empty">  </h1>
  <h1 empty-class="is-empty"></h1>

  <h1 empty-class="is-empty">
    <!-- ng-if: "oh Yeah" -->
  </h1>
  
  <h1 empty-class="is-empty"> Hello World </h1>
  <h1 empty-class="is-empty"><span>Hello World</span></h1>
</section>

【讨论】：

$compileProvider 会隐藏信息，但仍然显示 cmets :(

是的，正如我所说，您可以做的事情很少……这就是 angular 1x 的制作方法。

hmm，我可以使用 ng-cloak 给 div 添加一个类，而不是注释掉吗？

自定义指令可能是最好的主意，看看我最近的编辑。

虽然有一些小问题，但效果很好，非常感谢。