ホームページ >ウェブフロントエンド >htmlチュートリアル >html は複数のクラスをロードしますが、1 つだけをロードするクラスもあれば、両方をロードするクラスもあります。なぜですか? _html/css_WEB-ITnose

html は複数のクラスをロードしますが、1 つだけをロードするクラスもあれば、両方をロードするクラスもあります。なぜですか? _html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:37:361036ブラウズ

spe_top Banner_top と spe_top Banner_top どちらか 1 つだけが有効です
header_img spe_img どちらも有効です

HTML コード

<div class="spe_header header" style="height:150px;">	<div class="spe_top banner_top">        <div class="header_menu">            <input type="button" id="banner_open" />        </div>        <div class="banner spe_ban">            <div class="banner_x"><input type="button" id="banner_close" /></div>            <div class="banner_main speban_ul">                <ul>                    <li><a href="index.html">HOME</a></li>                    <li><a href="about.html">ABOUT</a></li>                    <li><a href="service.html">SERVICE</a></li>                    <li><a href="gallery.html">GALLERY</a></li>                    <li><a href="blog.html">BLOG</a></li>                    <li><a href=""></a>CONTACT</li>                </ul>            </div>        </div>	</div>	<div class="header_img spe_img"></div></div>


CSS コード

.spe_header{height:150px;}
header{background . :#0CC リピート ;高さ:700px;color:white;}
.spe_top{height:150px;}
.banner_top{background:rgb(0, 229, 238)repeat;height:700px;position:relative;top:0;}
header_img{ margin:0 auto;width:70%;height:800px;background:url(../images/banner.jpg) no-repeat;background-size:cover;position:absolute;top:0;left:230px ;}
.spe_img{height:150px;}


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

.spe_header{height:150px;}.header{background:#0CC repeat;height:700px;color:white;}.banner_top{background:rgb(0, 229, 238) repeat;height:700px;position:relative;top:0;}.header_img{margin:0 auto;width:70%;height:800px;background:url(../images/banner.jpg) no-repeat;background-size:cover;position:absolute;top:0;left:230px;}.spe_img{height:150px;}.spe_top{height:150px;}/*同样优先级的选择器,相同属性的样式,写在后面的会覆盖前面的,要把这行放到后面*/

そういう意味ではなく、まったく効果のないセレクターがあり、画像を配置することはできませんfirst
spe_top Banner_top と spe_top Banner_top 这两个分别只有一有效

header_img spe_img 两个都有效

.spe_header{height:150px;}.header{background:#0CC repeat;height:700px;color:white;}.banner_top{background:rgb(0, 229, 238) repeat;height:700px;position:relative;top:0;}.header_img{margin:0 auto;width:70%;height:800px;background:url(../images/banner.jpg) no-repeat;background-size:cover;position:absolute;top:0;left:230px;}.spe_img{height:150px;}.spe_top{height:150px;}/*同样优先级的选择器,相同属性的样式,写在后面的会覆盖前面的,要把这行放到后面*/

です

不この意思決定は、選択ツールの根本的な没効果があり、開始不了図
spe_top banner_top 和 spe_top banner_top 这 2つのうちどちらか1つだけが有効です


header_img spe_img 両方とも有効です



投稿者の投稿率はどれくらいですか? ? ? ? ああ。 。 。 。 。

カバーされています。

.spe_top{height:150px;}

.banner_top{background:rgb(0, 229, 238)repeat;height:700px;position:relative;top:0;}

最初のものは間違いなく機能しません。あなたが書いた 2 番目のスタイルを見てください。

恥ずかしくて返信できないので、急いで投稿を閉じてください。

皆さん、ありがとうございます。主にコメントに関する問題であり、優先順位があまり明確ではありませんでした。問題は解決されました。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。