htmlチュートリアル

CSS学習メモ(1)：selector_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:20 AM

1. 要素セレクター

HTML ドキュメント要素は最も基本的なセレクター

例:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>index</title><style type="text/css">    p {color:blue;}</style></head><body>    <p>这一段话是蓝色的。</p></body></html>

この例では

要素のフォントの色を青に設定し、要素セレクターが機能します。ドキュメント内のすべての

要素。同様に、次のように複数の要素にスタイルを同時に適用することもできます。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>index</title><style type="text/css">    h1,p {color:blue;}</style></head><body>    <h1 id="标题颜色">标题颜色</h1>    <p>这一段话是蓝色的。</p></body></html>

複数の要素にスタイルを適用する場合は、カンマで区切ります。

*ワイルドカードセレクターとして、任意の要素と一致できます。

形式: 要素|ワイルドカード

2. クラスセレクター

クラスセレクターのスタイルは、次のようなクラス属性に関連付けられている必要があります:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>index</title><style type="text/css">    .one {color:blue;}</style></head><body>    <p class="one">第一段。</p>    <p>第二段</p>    <p class="one">第三段</p></body></html>

Format: 。クラス名

コード 3 つの

要素があり、そのうちの 2 つは class="one" というクラス属性を持っています。これらの 2 つの

を指定するには、

3. マルチクラスセレクター

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>index</title>    <style type="text/css">        .one {color:blue;}        .two {color:red;}        .one.two {color:green;}    </style></head><body><p class="one two">第一段。</p><p class="two">第二段</p><p class="one">第三段</p></body></html>

効果:

形式:.クラス名 1. クラス名 2...

マルチクラスの概念は、複数の属性値を指定できることです。クラスの場合 (

に class="one two" を指定した場合)、この

要素の class 属性には 2 つの属性値 "one" と "two" が含まれます。、中央にスペースを区切り文字として使用します。スタイルシートでは、[.属性値 1. 属性値 2|...] を使用して要素を指します。上記のコードでは、クラス値が「one」である要素の色に青を適用し、クラス値に「two」が含まれる要素に赤を適用し、クラス値に「one」と「」の両方が含まれる要素の色に緑を適用します。二"。スタイルシートで .one.two{color:green;} が指定されていない場合、

最初の段落。

どんな効果があるの？答えは赤です。 .one と .two は両方とも、条件を満たす

の最初の段落を指すためです。

にすると、カスケードに従ってスタイルが適用されます。

4. ID セレクター

同様のセレクターは似ていますが、クラスセレクターの class 属性ではなく id 属性に一致します。クラスセレクターとは異なり、ID セレクターは HTML ドキュメント内で 1 回だけ使用されますが、指定された id 属性値は多くのブラウザーで複数回出現する可能性がありますが、これは誤りであり、JavaScript で getElementById() メソッドを使用すると不要なエラーが発生します。引き起こされる。 #elementID 属性値を通じて要素を指します。例:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>index</title>    <style type="text/css">        #p1 {color:blue;}    </style></head><body><p id="p1">第一段。</p><p>第二段</p><p>第三段</p></body></html>

形式: #ID 属性値

5. 属性セレクター

注: Safari、Opera およびすべての Gecko ベースのブラウザーは、IE5/Mac および IE6/Win より前は属性セレクターをサポートしていません。属性セレクター。

1. シンプルな属性セレクター

使用法: 特定の属性を持つ要素が必要な場合、属性の値は気にしません。単純な属性セレクターを使用できます。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>index</title>    <style type="text/css">        p[class] {color:blue;}         </style></head><body><p class="one">第一段。</p><p class="two">第二段</p><p>第三段</p></body></html>

効果:

形式: 要素|ワイルドカード [属性]

class 属性を含む

要素の色が青になり、class の値が変化しないことがわかります。焦点を当てる。

次のような複数の属性に基づいて選択することもできます: a[href][title]{font-weight:bold;} //href 属性と title 属性の両方を持つ要素を太字にします。

2. 特定の属性値に基づいて選択する

上記の例は属性値に注意を払わないセレクターなので、ここでは属性値に注意を払う必要があるセレクターについて説明します。上記の例を変更してみましょう:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>index</title>    <style type="text/css">        p[class="one"] {color:blue;}    </style></head><body><h1 id="">123</h1><p class="one">第一段。</p><p class="two">第二段</p><p>第三段</p></body></html>

効果:

形式: element | wildcard [attribute = 属性値]

p[class="one"] が p.one と同等であることがわかります。属性セレクターを使用すると、クラスセレクターの効果を実現するだけでなく、他の属性値に基づいて要素を選択できます。

3. いくつかの属性値に基づいて選択します

属性が単語リスト (スペースで区切られている) を受け入れることができる場合は、次のような単語の 1 つに基づいて選択できます:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>index</title>    <style type="text/css">        h1[class~="box"]{color:blue;}    </style></head><body><h1 id="">123</h1></body></html>

効果:

形式: 要素 | ワイルドカード [属性 ~ = 属性部分の値]

より高度な CSS セレクター (CSS2):

[foo^="bar"] foo 属性値が「bar」で始まるすべての要素を選択します

[foo$ ="bar"] foo 属性値が「bar」で終わるすべての要素を選択します

[foo*="bar"] foo 属性値に文字列「bar」が含まれるすべての要素を選択します

特定の属性の選択タイプ

rree

这个规则会匹配lang属性等于en或者以en-开头的所有元素，encn也不会起作用，因为不是en-开头，效果：

格式：元素|通配符[属性|="属性值"

六、后代选择器

h1 em{color:blue;}

可以看作对作为h1后代元素的em元素颜色改为蓝色，用代码展示就是：

<h1 id="em-em"><em>123</em></h1>

需要注意的是,这里是后代元素，而不只是子元素，如下面的代码也是有效的：

<h1 id="b-em-em-b"><b><em>123</em></b></h1>

如果只想缩小范围，选择子元素而不是后代元素，则可以使用下面的方式：

h1 > em{color:blue;}

选择相邻兄弟元素，如：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>index</title>    <style type="text/css">        h1+p{color:blue;}    </style></head><body><p>段落1</p><h1 id="段落">段落2</h1><p>段落3</p><p>段落3</p><p>段落4</p></body></html>

效果：

通过h1+p匹配了之前的兄弟元素是

的所有符合要求的

元素，如果

元素之前元素隔着其它元素，则不符合匹配要求，但中间只隔着文本内容并不会影响匹配。

接下来我们要讲的就是更有意思伪类和伪元素了。

伪类

1.链接伪类

：link 指示作为超链接（即有一个href属性）并指向一个未访问地址的所有锚。有些链接会不正确的解释

：visited 指示作为已访问地址超链接的所有锚

例子：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>index</title>    <style type="text/css">        a:link {color:blue;}        a:visited{color:red;}    </style></head><body><a href="#1">被点击过了了</a><a href="#2">未被点击</a></body></html>

结果：

链接伪类也适用于ID选择器,如：

a#one:link{color:yellow;}

2.动态伪类

:focus 当前拥有输入焦点的元素

:hover 指示鼠标停留元素

:active 指示被用户输入激活的元素

例子：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>index</title>    <style type="text/css">        input:focus{background-color:black;}        a:hover {background-color:yellow;}        a:active{background-color:red;}    </style></head><body><input type="text"><a href="#6">例子</a></body></html>

无操作效果：

文本框获得焦点效果：

鼠标在文字上停留效果：

鼠标在文字上按下左键时效果：

伪元素

1.设置首字母样式

如将

元素中第一个字母变成红色:

p:first-letter{color:red;}

效果：

2.设置第一行的样式

如：

p:first-line{color:red;}

效果：

3.设置之前和之后元素的样式

如：

h2:before{content:"<<";color:blue;}h2:after{content:">>";color:red;}

效果：

第一次写博客，免不了诸多错误，仅作为个人学习笔记。作为一名在校学生，希望大家多多指教。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、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ヘンタイを無料で生成します。

ホットツール

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。