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

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

黄舟

リリース： 2016-12-29 14:13:23

オリジナル

1327 人が閲覧しました

以下ではCSSのセレクターを紹介します
セレクターとは？以下を見るとわかります

<html>
<head>
<style type="text/css">
div{
border:solid 1px;
width:100px;
height:100px;
background:red
}
</style> <head>
<body>
<div>这是一个div</div>
</body>
</html>

ログイン後にコピー

中括弧の前の div は HTML タグセレクターです。つまり、HTML 内のすべての div タグがこのスタイルを採用することを意味します

<html>
<head>
<style type="text/css">
div{
border:solid 1px;
width:100px;
height:100px;
background:red
}
</style> <head>
<body>
<div>这是一个div</div>
<div></div>
<div></div>
<div></div>
</body>
</html>

ログイン後にコピー

ここにさらに div をいくつか追加すると、それらはすべて同じスタイルであることがわかります
この種のタグセレクターは、HTMLタグの場合にのみ有効です

以下はIDセレクターを紹介します

<html>
<head>
<style type="text/css">
#a{
border:solid 1px;
width:100px;
height:100px;
background:red
}
</style> </head>
<body>
<div id="a">这是一个div</div>
</body>
</html>

ログイン後にコピー

これは一目で理解するのが簡単です
#

のIDセレクターの後にクラスセレクター

<html>
<head>
<style type="text/css">
.a{
border:solid 1px;
width:100px;
height:100px;
background:red
}
</style> <head>
<body>
<div class="a">这是一个div</div>
</body>
</html>

ログイン後にコピー

クラスセレクターが前に追加されているのも一目で分かりやすいです

両者の違いについてお話しましょう
idは名前の通り、ラベルは一意の識別子であり、その優先順位はクラスセレクター
よりも高く、1つのタグ内で複数の

<html>
<head>
<style type="text/css">
#a{
border:solid 1px;
width:100px;
height:100px;
background:red
}
</style> <head>
<body>
<div id="a">这是一个div</div>
<div id="a">这是一个div</div>
</body>
</html>

ログイン後にコピー

と

<html>
<head>
<style type="text/css">
.a{
border:solid 1px;
width:100px;
height:100px;
background:red
}
</style> <head>
<body>
<div class="a">这是一个div</div>
<div class="a">这是一个div</div>
</body>
</html>

ログイン後にコピー

を使用できます

さらに、CSS スタイルブロックはこれです

.a{
border:solid 1px;
width:100px;
height:100px;
background:red
}

ログイン後にコピー

最後のブロックはセミコロンを省略できますが、追加するのが最善です

<html>
<head>
<style type="text/css">
#a{
background:red
}
.b{
border:solid 1px;
width:100px;
height:100px;
background:green;
}
</style> <head>
<body>
<div id="a" class="b">这是一个div</div>
</body>
</html>

ログイン後にコピー

ID セレクターは優先度が高いため、ID セレクターの背景色が使用されますidセレクター
優先度比較
idセレクター》クラスセレクター》ラベルセレクター

ただし、クラスセレクターは1つのラベル内で複数回使用できますこれはidセレクターではできないことです

<html>
<head>
<style type="text/css">
.a{
width:100px;
height:100px;
}
.b{
border:solid 1px;
background:red;
}
</style> <head>
<body>
<div class="a b" >这是一个div</div>
</body>
</html>

ログイン後にコピー

class="a b" に注意してくださいspace

これは div

これは無効です

2 つのクラスセレクターの内容が競合する場合はどうすればよいですか?

<html>
<head>
<style type="text/css">
.a{
width:100px;
height:100px;
border:solid 1px;
background:red;
}
.b{
width:100px;
height:100px;
border:solid 1px;
background:green;
}
</style> <head>
<body>
<div class="a b" >这是一个div</div>
</body>
</html>

ログイン後にコピー

背景色が異なることに注意してください
スタイルシートの最後の色が使用されます。つまり、誰が後ろにあるものを使用しても、答えは緑色です
それはコンテキストとは関係ありません。 this class="a b"

上記は、div+css Web レイアウト設計の新たな始まり (2) の内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。