时间戳

首页 > 解决方案 > CSS隐藏属性内容

css - CSS隐藏属性内容

问题描述

预期结果

如果内容为 0，我想隐藏 data-count-green 的内容。

我试过使用以下

CSS

.myclass[data-count][content='0'] {
  display: none;
}

HTML

<!DOCTYPE html>
<html>
  <head>
    <style>
      .myclass[data-count] {
        position: relative;
      }

      .myclass[data-count][content='0'] {
        display: none;
      } 

      .myclass[data-count]:after {
        position: absolute;
        content: attr(data-count);
      }
    </style>
  </head>
  <body>
    <div>
      <div>
        <i class='myclass' id="comment" data-count='0' </i>
      </div>
    </div>
  </body>
</html>

标签： css

解决方案

只需使用.far[data-count-green='0']

.far[data-count-green='0'] {
    display: none;
} 
<div>
    <div>
     <i class='far' id="comment" data-count-green='0'>I'm not visible</i>
    </div>
 </div>

推荐阅读