如何关闭div的显示

Question

我正在尝试删除图片中的空灰色括号。 我试过tag:empty和display: none但它对我不起作用。

.tag:empty {
   display: none;
}

.tag {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background-color: #eee;
    border-bottom-width: 3px;
    border-radius: 5px;
    border: 1px solid grey;
    color: #666;
    display: inline-block;
    font-size: 10px;
    padding: 3px 12px;
}

templates: {
    empty: '<div id="empty">No startup companies have been found for {{ query }}.</div><br>',
    item: `
        <a href="{{linkUrl}}">
          <div class="container">
            <div class="item1">
                <img src="{{logoUrl}}" alt="{{hits-image}}" id="hits-image">
            </div>
            <div class="item2" id="title">
                {{#helpers.highlight}}{ "attribute": "title" }{{/helpers.highlight}}
            </div>
            <div class="item3">
                <div id="location">
                    {{#_isLocation}}{{#helpers.highlight}}{ "attribute": "location" }{{/helpers.highlight}}{{/_isLocation}}
                </div>
                <div class="tag">
                    {{tagList}}
                </div>
            </div>
        </div></a>
      `,
    },
}),

请指教，非常感谢。

Answer 1

带有 class tag的div元素不为空：在图片代码中它包含一个空格，在模板代码中它包含围绕 Mustache (?) 替换括号的空格。 根据MDN 文档，

:empty CSS 伪类表示任何没有子元素的元素。 子节点可以是元素节点或文本（包括空格）。

快速控制台日志确认子节点的存在：

 console.log(mt.firstChild.nodeType == Node.TEXT_NODE)

 <div class="tag" id="mt"> </div>

您应该能够使用:empty伪 class 确保tag class 元素中没有空格，方法是一起移动开始和结束标签，使用 HTML 注释或设置源中的任何空白等）。元素的内容到空字符串：

 .tag { width: 50px; height: 30px; background-color: cyan; }.tag:empty { display: none; }

 Empty <code>div.tag</code> (no child nodes) ➡️<div class="tag"></div>⬅️ <p></p> Non empty <code>div.tag</code> (contains white space) ➡️<div class="tag"> </div>⬅️

正如已经回答的那样，出于语法目的，还需要在.tag:empty的 CSS 规则中包含tag之前的句点。