Question

出于某种原因，我的CSS不适用于我的HTML。

HTML：

<textarea class="overlay-display-hide preview-caption" placeholder="Add Your Caption here..."></textarea>

CSS：

.overlay-display-hide {
    display: hide !important;
}
.preview-caption {
    position: absolute;
    width: 360px;
    height: 260px;
    background-color:transparent;
    border-style: none;
    color: white;
    font-size: 14px;
    padding: 20px;
    resize: none;
    overflow: hidden;
}

由于某些原因，“overlay-display-hide”类在检查时不会显示在元素中。你有什么想法？我打赌我只是监督了一些事情。

Answer 1

不存在display: hide。阅读此merge

中的所有媒体资源

例如，如果您要隐藏元素使用display: none或visibility: hidden

.overlay-display-hide {
    display: none !important;
}

Answer 2

它实际上可以正确渲染，我也可以在Chrome检查器中看到该类。但是浏览器会忽略display: hide的属性，因为它的语法错误。您可以read here，支持哪些值，但hide不是它们。

我假设您正在寻找display: none。您可以在浏览器的检查器的DOM树中看到该元素，但它不会应用于该页面。另一个选项是visibility: hidden，它只是不显示元素，但它实际上占用了页面中的空间，所以它在那里，但不可见。

请参阅以下示例，了解display: none和visibility: hidden

之间的区别

＆＃13;

.col {
  width: 50%;
  float: left;
}

.elem {
  width: 90%;
  margin: 10px auto;
  height: 50px;
  background: green;
}

.hidden {
  visibility: hidden;
}

.none {
  display: none;
}

＆＃13;

<div class="col">
  <h1>visibility: hidden</h1>
  <div class="elem"></div>
  <div class="elem hidden"></div>
  <div class="elem"></div>
</div>
<div class="col">
  <h1>display: none</h1>
  <div class="elem"></div>
  <div class="elem none"></div>
  <div class="elem"></div>
</div>

＆＃13;

Answer 3

首先，您应该使用display: none代替display: hide来隐藏某些内容。您可以在display属性here上了解更多信息。

还有其他方法可以隐藏display: none可能不合适的HTML元素，请按此link进行操作。

你的意图是什么？它不太清楚。

？为什么我的CSS不适用？

3 个答案: