Question

网上的任何地方我都发现多个css类使用空格作为分隔符所以，我写了以下内容：

<div class="page hidden">

CSS

.hidden{
    display:none;
}

使用上面的代码.hidden不是隐藏的，而是可见的。

但是使用：

<div class="page, hidden">

.hidden已隐藏。

任何解释！？

Answer 1

仅举例：

.page{ display:block}

.hidden{
    display:none!important;
}

jsFiddle：https://jsfiddle.net/r1us08a3/2/

Answer 2

css的堆叠顺序将影响应用的样式。此外，所用标签的特殊性将影响您从前端看到的内容。举个例子：

/* .hidden is ignored  in this example because .page comes after the hidden tag */
.hidden {display:none;}
.page {display: block;}


/* where as this will hold as it's more specific to the page, so will take a higher priority */
body .hidden{display: none;}
/* or this as it's more specific to the exact tags above */
.page.hidden {display: none;}

Answer 3

你做的一切都是正确的。唯一的解释是，你还有其他影响它的东西，你没有提到你的问题。

只是为了证明它有效：

div {
  height:300px;
  width:300px;
  position:relative;
  border-radius:150px;
  line-height:300px;
  text-align:center;
}
div div {
  height:150px;
  width:150px;
  border-radius:75px;
  position:absolute;
  top:75px;
  left:75px;
  line-height:150px;
}
.green {
  background-color:green;  
}
.red {
  background-color:red;  
  color:white;
}
.hidden {
  display:none;  
}
.visible:hover .hidden {
  display:block;  
}

<div class="green visible">
  <div class="red hidden">
    hidden div
  </div> 
  hover here
</div>

css多个类 - propper分隔符

3 个答案: