コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > 本文

表示: なしは機能しません_html/css_WEB-ITnose

WBOY
リリース： 2016-06-24 11:15:12
オリジナル
3719 人が閲覧しました

<html>    <head>        <meta http-equiv="content-type" content='text/html;charset=utf-8'/>        <style>        <!--本页的css样式-->       .reveal * {display: none;}       /*.reveal * {background-color: gray;}*/              .reveal *.handle {display: block;}       .reveal *.handle {background-color: gray;}        </style>    </head>    <body>        <div class="reveal">         <h1 class="handle">Click Here to Reveal Hidden Text</h1>         <p>This paragraph is hidden. It appears when you click on title.</p>        </div>    </body></html>
ログイン後にコピー



.reveal * {display: none;} は .handle 要素を除いて非表示にする必要があります。 なぜ display: none が機能しないのでしょうか?


ディスカッションへの返信(解決策)

重複した場合、前のクラスの表示は無効になります。


.reveal * {display: none;} この効果は .reveal *.handle {display: block;} によってオーバーライドされます

まず、このコメントを変更します (つまり CSS)。 / , /*このページの css スタイル*/ に変更されました
優先事項、 .reveal *.handle は .reveal * {display: none;} よりも上位です、最も優先度の高いものが有効になります

<--このページの CSS スタイル-->

これは CSS ではありません。構文に注意してください。スタイルは次の行で破棄されます

正しいです。 3階と4階でお答えします、ありがとうございます

関連ラベル：
display: none 不起作用
ソース：php.cn
前の記事：プログラム、テクノロジー、トレンド、ファッション_html/css_WEB-ITnose 次の記事：CSS pseudo-class:focus が個々のプロパティに対してのみ機能するのはなぜですか? _html/css_WEB-ITnose
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...
から 2024-04-06 21:58:04
0
1
800
モバイル ビューで、ユーザーがリンクをクリックしたときにこのナビゲーション バーを閉じるにはどうすればよいですか? ユーザーがリンクをクリックして Web サイトを閲覧すると、ナビゲーション バーが閉じませんか?ナビゲーション バーを閉じるために、クリック イベント リスナーを各リンクに追加しよ...
から 2024-04-06 19:23:03
0
1
411
SQL groupbyが機能しないので、code_branchでグループ化したい ->select('a.statusasstatus','b.nameascustomer_name','e.nameasbranch_name','c.nameascomp...
から 2024-04-06 19:24:49
0
2
488
SCSSを使用してデフォルト値とCSS変数を生成する ウェブサイトのスタイリングを実装しています。レガシー サポートの理由から、少なくともしばらくの間は IE11 をサポートする必要があります。ワークフローと私の健全性の理由から、私は...
から 2024-04-06 17:46:54
0
1
355
Android 上の React-Native でステータス更新が機能しない スワイプ可能な水平ギャラリーに画像のペアを含むコードがいくつかあります。両方の画像の上部をクリックすると、画像がオフに切り替わるはずです。そのため、私が行ったのは、isImage2...
から 2024-04-06 16:54:10
0
1
410
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート