div+css Webページレイアウトデザインの新たな始まり(3)-CSSチュートリアル-php.cn

标题

ホームページ

ウェブフロントエンド

CSSチュートリアル

div+css Webページレイアウトデザインの新たな始まり(3)

黄舟

Dec 29, 2016 pm 02:17 PM

以下は組み合わせセレクターの紹介です
組み合わせセレクターとは同じ属性をまとめるという意味です

例えば

<h1 id="标题">标题</h1>
<h2>标题</h1>
<h3>标题</h1>
<h4>标题</h1>
<h5>标题</h1>

ログイン後にコピー

この5種類のタイトルの文字を赤色にしたいのですが、当然ながら1つずつ定義するのは面倒です。
このようにできます



 

<h1 id="标题">标题</h1>
<h2>标题</h1>
<h3>标题</h1>
<h4>标题</h1>
<h5>标题</h1>

ログイン後にコピー

もちろん、ID セレクター、クラスセレクター、ラベルセレクターを組み合わせることもできます

,a,#b,div{
color:red
}

ログイン後にコピー

それらはカンマで区切る必要があることに注意してください
カンマで区切られていない場合は、親子セレクターについては以下で説明します

<div id="a">
<h1 id="标题">标题</h1>
<h1 id="标题">标题</h1>
<h1 id="标题">标题</h1>
<h1 id="标题">标题</h1>
<h1 id="标题">标题</h1>
<div>

ログイン後にコピー

div 内のすべての Hi タグを赤色にしたい場合
方法はたくさんあります。1 つはタグセレクターを使用することですが、すべての H1 タグがオンになります。そうでない場合は、classタグを使用することもできますが、h1タグごとにクラス化するのは面倒です

これで大丈夫です



 

<div id="a">
<h1 id="标题">标题</h1>
<h1 id="标题">标题</h1>
<h1 id="标题">标题</h1>
<h1 id="标题">标题</h1>
<h1 id="标题">标题</h1>
<div>

ログイン後にコピー

これ大丈夫です

<div id="a">
<a><h1 id="标题">标题</h1></a>
<a><h1 id="标题">标题</h1></a>
<div>

ログイン後にコピー

それは非常に簡単です、実際、親の選択はそれを制御できます以下の任意のタグ、クラス、またはIDセレクター、つまり孫または曾孫です
したがって、これも可能です



 

<div id="a">
<a><h1 id="标题">标题</h1></a>
<a><h1 id="标题">标题</h1></a>
<div>

ログイン後にコピー

しかし、それは可能ですこれを行わないことをお勧めします。レベルが明確でないと混乱しやすいためです

もう 1 つの属性セレクターですが、あまり一般的には使用されません



 

<div id="a">
<a><h1 id="标题">标题</h1></a>
<a><h1 id="标题">标题</h1></a>
<div>

ログイン後にコピー

もっと学習する必要があります

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
[title]{
color:red;
}
</style> <head>
<body>
<div id="a">
<a title="a"><h1 id="标题">标题</h1></a>
<a title="b"><h1 id="标题">标题</h1></a>
<div>
</body>
</html>

ログイン後にコピー

ドキュメントの説明は役に立つだけです

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

ログイン後にコピー

のみ有効です

属性セレクターは、クラスや ID のないフォームのスタイルを設定する場合に特に役立ちます:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


 


标题
标题

ログイン後にコピー

ただし、コンテンツを習得するために必要なトレーニングを行う必要はありません

隣接セレクターの紹介
これは難しいかもしれません理解してください

input[type="text"]
{ width:150px; display:block; margin-bottom:10px; background-color:yellow; font-family: Verdana, Arial; } 
input[type="button"] { width:120px; margin-left:35px; display:block; font-family: Verdana, Arial; }

ログイン後にコピー

これは実際には最初のpのスタイル用です Margin-top:50pxは外側のマージン50ピクセルを意味します

サブ要素セレクターもあります。これも理解するのが難しいです

まず下を見てください

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 + p {margin-top:50px;} </style> <head>
<body>
<h1 id="标题">标题</h1>
<p>我离上面标题50px</p>
<p>不变</p>
<p>不变</p>
</body>
</html>

ログイン後にコピー

これは非常におなじみの、親子セレクターです。父親は以下の子要素を制御できると言いましたので、両方とも赤色になります
私が望むだけであれば。 a を p の子要素にし、もう 1 つの a をspan 要素の子にする、これがそのはずです

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p a {color:red;} </style> <head>
<body>
<p>你<a>好</a>吗</p>
<p>你<span><a>好</a></span>吗</p>
</body>
</html>

ログイン後にコピー

これらのセレクターの両方にを追加する必要があります (もちろん、これが唯一のものではありません)。 )、そうでない場合は無効になります

これら 2 つのセレクターは非常に柔軟性があり、専門家として進歩することができ、初心者としても他のセレクターのための強固な基礎を築きましょう

ここで重要なコンテンツ div ボックスモデルです

これはW3Cの写真です、別の写真を見ています

div+css Webページレイアウトデザインの新たな始まり(3) 実際、見るだけで理解できます