？CSSが適用されないのはなぜですか？

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; 
} 

そして、検査時に何らかの理由で、 "オーバーレイ表示・非表示" クラスは要素に表示されません。あなたはなにか考えはありますか？私はちょうど何かを監督したと思う。

Answer 1

存在しないdisplay: hide。たとえば、このsite

からすべてのプロパティを読んで、あなたはそれが実際に正しくレンダリングんし、私もクロームインスペクタでクラスを参照してくださいすることができますdisplay: noneまたはvisibility: hidden

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

Answer 2

を使用する要素を非表示にする場合。しかし、ブラウザはあなたの性質が間違っているので、display: hideのあなたの特性を無視します。 read here、サポートされている値はありますが、hideはどれも該当しません。

私はあなたがdisplay: noneを探していると仮定します。ブラウザのインス​​ペクタのDOMツリーに要素が表示されますが、ページには適用されません。 もう1つのオプションはvisibility: hiddenです。これは要素を表示しないだけですが、ページ内のスペースを取るため、表示されますが表示されません。

display: noneとvisibility: hidden

.col { 
 
    width: 50%; 
 
    float: left; 
 
} 
 

 
.elem { 
 
    width: 90%; 
 
    margin: 10px auto; 
 
    height: 50px; 
 
    background: green; 
 
} 
 

 
.hidden { 
 
    visibility: hidden; 
 
} 
 

 
.none { 
 
    display: none; 
 
}

<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>

Answer 3

の違いを理解するために、次の例を参照してください。まず、あなたが何かを隠すためにdisplay: noneの代わりdisplay: hideを使用する必要があります。 displayプロパティhereで詳しく調べることができます。

display: noneが適切でない可能性があるHTML要素を非表示にするには、他にもlinkのような方法があります。

あなたの意図は何ですか？それほど明確ではない。