CSS がセレクターを征服する 1_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

CSS がセレクターを征服する 1_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:25 AM

Selectors (セレクター)

--------------CSS の学習については MDN を参照してください。

まず、CSS セレクターはたくさんありますが、一般的には次の 2 つのタイプがあります:

ラベルセレクター (* は特殊なケース)。単一のラベルまたはコンテキストに応じた複数のラベルにすることができます。
属性セレクター (id;およびクラス) これらはすべて属性であり、特別な属性です);

タグセレクター ~ 単一タグ

は、この単一タグの名前を参照して、 の操作などのスタイル操作を実行できます。この HTML 値のタグ。

<!DOCTYPE html><html>  <head>  <meta charset="UTF-8">  <title>Sample document</title>    <link rel="stylesheet" href="style.css">  </head>  <body>    <p>      <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets </p>  </body></html>

CSS ファイル内でそのタグを使用して、文字を赤色にするなど、タグ内の属性に対してスタイル操作を実行します。

strong { color: red;}

タグセレクター ~ マルチタブ

公式バージョン

B + E 次の兄弟要素 E任意の要素 B の共通の親要素を持つ B 要素の後の兄弟要素 E div p などの祖先のすべての子孫ノードを選択します{…} div > p{…} などの親要素の直接ノードをすべて選択します li + li{…} などの要素の隣の兄弟ノードを選択します特定の要素のすべての兄弟ノードを選択します例:span ~ a{…}

セレクター	選択された要素
A E	要素 A の子孫である任意の要素E (子孫ノードとは、A の子ノード、子ノードの子ノードなどを指します)
A > 最初の子要素 E
	B ~ E
	よくある説明

上記の状況を組み合わせたアプリケーション (組み合わせを複雑にしすぎないでください。コーディングは読みやすさを第一に考えてください)

以下に示すように、典型的なアプリケーションをリストします
上の図の効果はより一般的であるはずで、各メニューの間に下線を引いてください。私の以前の実装は、各 li に border-bottom を追加し、最後の li の border-bottom を削除するというものでした。
実際には、それほど面倒なことは必要ありません。次のスタイル設定で解決できます。
属性セレクター ~

最初に行うのは、もちろん、class と id の 2 つの強力なプレーヤーです

(クラスセレクター)

要素の class 属性を設定することで、要素のクラス名を指定できます要素。クラス名は開発者自身が指定します。ドキュメント内の複数の要素が同じクラス名を持つことができます。

スタイルシートを記述する場合、クラスセレクターは英語のピリオド (.) で始まります。

(ID セレクター)

id 属性を設定して要素の ID を指定します。 ID名は開発者が指定します。各 ID はドキュメント内で一意である必要があります。

スタイルシートを記述する場合、IDセレクターは#で始まります。

例を見てみましょう:

ul li+li{    border-top: 1px solid #ccc;}

<p class="key" id="principal">

上記の p タグには class 属性と id 属性の両方があります

CSS の ID セレクタープリンシパルは一意である必要がありますが、クラスセレクターは一意である必要があります。他のタグと併用タグ内のキーは同じなので、複数のタグを同時に操作できます。

.key {  color: green;}#principal {  font-weight: bolder;}

例: クラスセレクターと ID セレクターを使用して HTML ファイルを作成する

style1.css を作成する

你也可以将多个选择器组合起来构成更确定的选择器。比如，选择器.key 选中所有class属性为 key的元素. 选择器 p.key 选中所有class属性为key的<p> 元素。除了class 和 id，你还可以用方括号的形式指定其他属性。比如，选择器 [type='button'] 选中所有 type 属性为 button 的元素

<!doctype html><html>  <head>  <meta charset="UTF-8">  <title>Sample document</title>  <link rel="stylesheet" href="style1.css">  </head>  <body>    <p id="first">      <strong class="carrot">C</strong>ascading      <strong class="spinach">S</strong>tyle      <strong class="spinach">S</strong>heets    </p>    <p id="second">          <strong>C</strong>ascading          <strong>S</strong>tyle          <strong>S</strong>heets        </p>  </body></html><br />

3. ファイルを保存し、ブラウザを使用して実行します

スタイル内のルールの順序を再編成すると、これらのルールの順序を変更しても最終的な効果に影響しないことがわかります。

クラスセレクター .キャロットおよび .スピナッチは、タグセレクター Strong よりも高い優先順位を持ちます。

ID セレクター #first は、クラスセレクターやタグセレクターよりも優先されます。

最初の記事でこれらを記録しましょう。疑似クラスと疑似要素については、後で個人的によく理解していないので、最初に勉強してまとめます。

ブログを始めたばかりなので、まだまだリズムに問題があると感じています。漏れがあれば先輩方にアドバイスをいただき謙虚に勉強させていただきますのでよろしくお願いします。

声明

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

HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。