ホームページ > 記事 > ウェブフロントエンド > セレクター宣言とネストとは何ですか? CSS セレクターの宣言とネスト
セレクター宣言とネストとは何ですか? CSS セレクターの宣言とネスト
- 零下一度オリジナル
- 2017-04-22 13:10:522620ブラウズ
CSS セレクターを使用して HTML タグを制御する場合、各セレクターの属性は一度に複数回宣言でき、セレクター自体も同時に複数回宣言できます。さらに、セレクタの形式はどれも正当であり、タグ セレクタ、クラス セレクタ、ID セレクタはすべてまとめて宣言できます。 CSS セレクターを宣言するときに、一部のセレクターのスタイルがまったく同じか部分的に同じである場合、一括宣言を使用して同じスタイルのセレクターを同時に宣言できます。
<span style="font-size:24px;"><html>
<head>
<title>
集体声明
</title>
<style type="text/css">
<!--
h1,h2,h3,h4,h5,p{
color:purple;
font-size:15px;
}
h2.special,.special,#one{
text-decoration:underline;
}
-->
</style>
</head>
<body>
<h1>集体声明h1</h1>
<h2 class="special">集体声明h2</h2>
<h3>集体声明h3</h3>
<h4>集体声明h4</h4>
<h5>集体声明h5</h5>
<p>集体声明p1</p>
<p class="special">集体声明p2</p>
<p id="one">集体声明p3</p>
</body>
</html>
</span>グローバル宣言
実際のWebサイトで、ページ内のすべてのタグに同じCSSスタイルを使用したいが、1つずつまとめて宣言したくない場合は、グローバル宣言シンボルを使用できます* を宣言する。
<span style="font-size:24px;"><html>
<head>
<title>
集体声明
</title>
<style type="text/css">
<!--
*{
color:purple;
font-size:15px;
}
h2.special,.special,#one{
text-decoration:underline;
}
-->
</style>
</head>
<body>
<h1>集体声明h1</h1>
<h2 class="special">集体声明h2</h2>
<h3>集体声明h3</h3>
<h4>集体声明h4</h4>
<h5>集体声明h5</h5>
<p>集体声明p1</p>
<p class="special">集体声明p2</p>
<p id="one">集体声明p3</p>
</body>
</html>
</span>2 つの宣言はまったく同じ効果があることがわかりますが、グローバル宣言を使用するとコードが大幅に削減されます。
セレクターのネスト
CSS セレクターでは、ネストを使用して特別な位置で HTML タグを宣言できます。
たとえば、p タグ内の b タグを制御します
<span style="font-size:24px;"><html>
<head>
<title>
CSS选择器的嵌套声明
</title>
<style type="text/css">
<!--
p b{
color:maroon;
text-decortion:underline;
}
-->
</style>
</head>
<body>
<p>嵌套使<b>用CSS</b>标记的方法</p>
嵌套之外的<b>标记</b>不生效
</body>
</html>
</span>ネストされたセレクターは非常に広く使用されており、ネストされたタグ自体だけでなく、カテゴリ セレクターや ID セレクターもネストできます。
実際、 .top カテゴリの b6c5a531a458a2e790c1fd6421739d1c タグには 3 つのレベルのネストが使用されており、これには .top1 カテゴリが含まれています。 タグ、宣言されたスタイル。
<span style="font-size:24px;">td.top .top1 strong{
font-size:16px;
}
<td class="top">
<p class="top1">
其他内容<strong>CSS控制的部分</strong>其他内容
</p>
</td>
</span>セレクターのネストにより、CSS でのクラスと ID の宣言を大幅に減らすことができるため、ページの HTML を構築するときは、通常、外側のタグのクラスまたは ID のみを定義し、内側のタグをネストできます。ネストされた表現が使用されるため、新しいクラスや ID を定義する必要はありません。サブタグがこのルールを利用できない場合にのみ、別の宣言が行われます。
以上がセレクター宣言とネストとは何ですか? CSS セレクターの宣言とネストの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。