マジカル CSS3 selector_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

マジカル CSS3 selector_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:40 AM

私は長年庭に携わっていますが、ブログを書いたことはありません。基本的なことを書きたい場合は、css3 セレクターから始めましょう。

Css3 Selector

まず、セレクターの使用を推奨する理由について話しましょう。

セレクターを使用すると、スタイルを要素に直接バインドでき、どのスタイルがスタイルシート内のどの要素に一致するかが一目でわかり、変更も簡単です。
スタイルシートのコードの量を減らします。

属性セレクター

1.[att*=val] 属性セレクター

意味: 要素の att で表される属性の属性値に val で表される文字が含まれる場合、要素はこれを使用します。 style

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        [id*=demo]        {            width: 100px;            height: 100px;            background-color: #000099;        }    </style></head><body><div id="demo"></div></body></html>

2. [att^=val] 属性セレクター

意味：要素の att で表される属性の属性値が val で表される文字列で始まる場合、要素はこのスタイルを使用します。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        [id^=demo]        {            width: 100px;            height: 100px;            background-color: #000099;            margin: 10px;        }    </style></head><body><div id="demo"></div><div id="demo1"></div></body></html>

3. [att$=val] 属性セレクター

意味: att で表される属性の属性値が val で表される文字列で終わる場合、要素はこのスタイルを使用します

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        [id$=o]        {            width: 100px;            height: 100px;            background-color: #000099;            margin: 10px;        }    </style></head><body><div id="demo"></div><div id="demooo"></div></body></html>

構造擬似クラスセレクター

擬似クラスセレクターは定義されたセレクターを指し、気軽に名前を付けることはできません。

例: a:link,a:visited,a:hover,a:active.

擬似要素セレクターとは、要素に対して定義されたセレクターを指します。

最初の行の疑似要素セレクター

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">       p:first-line       {           color: red;       }    </style></head><body>  <p>      hello world      <br/>      你好  </p></body></html>

2.最初の文字の疑似要素セレクター

 <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">       p:first-letter       {           color: red;       }    </style></head><body>  <p>      hello world  </p>  <p> 你好</p></body></html>

<strong>befor伪元素选择器</strong>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">       li:before       {           content: '*';       }    </style></head><body>   <ul>       <li>demo1</li>       <li>demo1</li>       <li>demo1</li>       <li>demo1</li>       <li>demo1</li>   </ul></body></html>

擬似要素セレクター後

rree

ルートセレクター

ルートセレクターは、スタイルをページのルート要素にバインドします。使用時: ルート要素とボディ要素の背景、条件によって表示効果が異なります

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">       li:after       {           content: '*';       }    </style></head><body>   <ul>       <li>demo1</li>       <li>demo1</li>       <li>demo1</li>       <li>demo1</li>       <li>demo1</li>   </ul></body></html>

not selector

要素を使用しないように構造要素の下にある部分構造要素を除外します

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">       :root       {           background-color: #003300;       }        body        {            background-color: yellow;        }    </style></head><body><p>你好</p></body></html>

empty selector

要素の内容が空の場合に使用されるスタイル。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        body *:not(h1)        {            background-color: yellow;        }    </style></head><body><h1 id="大家好">大家好</h1><p>你好</p></body></html>

ターゲットセレクター

ターゲットセレクターを使用して、ページ内のターゲット要素にスタイルを適用します

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        td:empty        {            background-color: yellow;        }    </style></head><body><table border="1">    <tr>        <td width="100px">1</td>        <td width="100px">2</td>        <td width="100px"></td>    </tr></table></body></html>

最初の子、最後の子セレクター

最初の子要素と最後の子要素を指定します子要素のスタイル

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        :target        {            background-color:yellow;        }    </style></head><body><table border="1">   <a href="#text3">示例1</a>    <div id="text1">        <h1 id="你好">你好</h1>        <p>你好你好你好你好你好你好你好你好你好你好你好你好你好你好</p>    </div>    <div id="text2">        <h1 id="你好">你好</h1>        <p>你好你好你好你好你好你好你好你好你好你好你好你好你好你好</p>    </div>    <div id="text3">        <h1 id="你好">你好</h1>        <p>你好你好你好你好你好你好你好你好你好你好你好你好你好你好</p>    </div></table></body></html>

nth-child, nth-last-child selector

親要素内で指定されたシーケンス番号を持つ子要素のスタイルを指定します。

Nth-child(even) を使用して偶数番号の要素のスタイルを指定し、Nth-child(odd) を使用して奇数番号の要素のスタイルを指定することもできます

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">       li:first-child       {           background-color: yellow;       }        li:last-child        {            background-color: #009999;        }    </style></head><body><table border="1">   <ul>       <li>1</li>       <li>2</li>       <li>3</li>       <li>1</li>   </ul></table></body></html>

nth-of-type nth-last -of-type selector

これら 2 つのセレクターは、nth-child セレクターと nth-last-child セレクターの欠点を補うもので、類似した要素のスタイルのみを指定します。

UI要素ステータスセレクター

E:horver,E:active,E:focusセレクター

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">       li:nth-child(2)       {           background-color: yellow;       }        li:nth-last-child(2)        {            background-color: #009999;        }    </style></head><body><table border="1">   <ul>       <li>1</li>       <li>2</li>       <li>3</li>       <li>1</li>   </ul></table></body></html>

E:enabled,E:disabled,E:read-only,E:read-Writeセレクター

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        input[type="text"]:hover        {            background-color: yellow;        }        input[type="text"]:focus        {            background-color: green;        }        input[type="text"]:active        {            background-color: red;        }    </style></head><body><input type="text" name="name"></body></html>

E: チェック、E: DEFAULT セレクター

e: Checked はチェックボックスのスタイルを指定します

e:default はデフォルトの選択ボックスのスタイルを指定します

E::selection セレクター

要素選択時のスタイルを指定

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        input[type="text"]:disabled        {            background-color: green;        }        input[type="text"]:read-only        {            background-color:darkgrey;        }    </style></head><body><input type="text" disabled><br><input type="text" ><br><br><input type="text" readonly="readonly" ></body></html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        p::selection        {            background-color: goldenrod;        }    </style></head><body> <p>测试测试</p></body></html>

🎜🎜🎜 🎜🎜🎜🎜🎜

声明

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

HTML：構造、CSS：スタイル、JavaScript：動作Apr 18, 2025 am 12:09 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

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ページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。