【閲覧注意】CSS決定版ガイド1：Selector_html/css_WEB-ITnose
ワイルドカード セレクター
ワイルドカードと同様に、任意の要素と一致できます
/*每一个元素的字体都设置为红色*/* { color: red;}要素セレクター
ドキュメント要素のセレクターを示します。 ... セレクター
ドキュメント要素に依存しない スタイルを指定する方法
/*为body的字体设置为红色*/body { color: red；}ID セレクター
h1, h2, h3 { color: red;}ID セレクターとクラス セレクターの違い:
HTML内ドキュメント、ID セレクターは 1 回だけ使用されます。したがって、id 値が lead-para の要素がある場合、ドキュメント内の他のすべての要素は id 値が lead-para を持つことはできません。 (注: 通常、ブラウザは HTML 内の ID の一意性をチェックしません。つまり、HTML ドキュメント内で同じ ID 属性値を持つ複数の要素を設定すると、これらの要素に同じスタイルを適用できる可能性があります。) ID 属性ではスペースで区切られた単語のリストが許可されないため、セレクターを一緒に使用することはできません。
クラス セレクターと ID セレクターは、ドキュメントの言語によっては大文字と小文字が区別される場合があります。 HTML と XHTML では、クラスと ID の値の大文字と小文字が区別されるように定義されているため、クラスと ID の値の大文字と小文字はドキュメント内の対応する値と一致する必要があります。
h1 { font: 18px Helvetica; color: purple; background: aqua;}
- 特定の属性値に基づいて選択します
-
h1, h2, h3 { font: 18px Helvetica; color: purple; background: aqua;}ログイン後にコピー
属性値の一部に基づいて選択します
属性が単語リスト (スペース) を受け入れることができる場合単語間）分割）のいずれかに基づいて選択できます。.warning { font-weight: bold}/*包含warning元素的p标签会apply下面的style*/p.warning { font-weight: bold}/*同时包含urgent和warning类名的元素会apply下面的style，类名顺序不限*/.urgent.warning { font-weight: bold}/*同时包含urgent和warning类名的元素P会apply下面的style*/p.urgent.warning { font-weight: bold}
Type
[foo^="bar"]
すべての要素を選択foo 属性値が "bar" で始まる要素
foo 属性値が "bar" で終わる要素をすべて選択します
[foo~="bar"]
| [foo*="bar"] | |||||||||||||||||||||||||||||||||||||||||
| 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
<h1 lang="en">Hello!</h1><p lang="en-us">Greetings!</p><div lang="en-au">G’day!</div><p lang="fr">Bonjour!</p><h4 lang="cy-en">Jrooana!</h4>/*上述标签前三个会变成红色，后两个还是黑色*/*[lang|="en"] { color: red;}ログイン後にコピー 后代选择器
h1 em { color: gray;}/*blockquote中包含的所有b（粗体）元素的文本颜色为灰色，另外正常段落中的所有粗体文本也为灰色*/blockquote b, p b { color: gray;}ログイン後にコピー 后代选择器中，元素之间的层次间隔可以是无限的。 子元素选择器
h1>strong { color: red;}ログイン後にコピー 子元素选择器限制为只匹配树种直接相连的元素。 可以在同一个选择器中结合使用后代选择器和子选择器。
/*选择作为一个td元素子元素的所有p元素，这个td元素本身从table元素继承，该table元素有一个包含summary的class属性*/table.suitimary td > p { color: red;}ログイン後にコピー 相邻兄弟选择器和子结合符一样，相邻兄弟结合符旁边可以有空白符。
/*去除紧接在一个h1元素后出现的段落的上边距*/h1+p { margin-top: 0;}ログイン後にコピー 需要注意的是：
<div><ol><li>List item 1</li><li>List item 1</li><li>List item 1</li></ol> This is some text that is part of the 'div'.<ul><li>A list item</li><li>Another list item</li><li>Yet another list item</li></ul></div>/*尽管两个列表间多了一行文本，不过还是可以用选择器ol+ul来匹配第二个列表。*/ol+ul { color: red;}ログイン後にコピー 伪类和伪元素选择器利用伪类和伪元素选择器，可以为文档中不一定具有存在的结构指定样式，或者为某些元素(甚至是文档本身)的状态所指示的幻像类指定样式。会根据另外某种条件而非文档结构向文档中的某些部分应用样式，而且无法通过研究文档的标记准确地推断出采用何种方式应用样式。
a { color: red;}a:link { color: red;}/*两者是不同的，a:link指示的是一个有href属性的，并且未访问过的所有a节点a会应用到所有a标签*/ログイン後にコピー
a:link { color: blue;}a:visited { color: red;}a.external:link, a.external:visited { color: maroon;}ログイン後にコピー 伪类的顺序很重要，通常建议为link-visited-focus-hover-active。 :link和:visited是静态的——第一次显示之后，它们一般不会在改变文档的样式。 :focus, :hover, :active是动态伪类。动态伪类可以应用到任何元素。
input:focus { background-color: silver; font-weight: bold;}ログイン後にコピー
/*作为某元素(可以是任意元素)的第一个子元素的所有P元素设置为粗体。最常见的错误是认为p:first-child之类的选择器会选择p元素的第一个子元素。*/p:first-child { font-weight: bold;}ログイン後にコピー 从对应的模式来讲，:lang()伪类就像是|=属性选择器。
*:lang(fr) { font-style: italic;}ログイン後にコピー 伪选择器和属性选择器之间的主要差别在于语言信息可以从很多来源得到，而且其中一些可能在元素之外。CSS2.1指出： 在HTML中，语言由lang属性和META元素的组合来确定，还可能包括协议提供的信息，如HTTP首部。XML使用一个xml:lang属性，另外可能还有其他文档语言特定的方法来确定语言。 因此，伪类比属性选择器稍微健壮一些。 结合伪类：
/*鼠标指针停留在未访问链接上时，可以让这些链接变成红色，而鼠标指针停留在已访问链接上时，链接变成紫红色。*/a:link:hover { color: red;}a:visited:hover { color: maroon;}ログイン後にコピー 用哪种顺序指定并不重要，写成a:hover:link会得到与a:link:hover一样的效果。 就像伪类为锚指定幻象类一样，伪元素能够在文档中插入假想的元素，从而得到某种效果。CSS2.1中定义了4个伪元素：设置首字母样式、设置第一行样式、设置之前和之后的样式。 用于设置一个块级元素首字母的样式，而且仅对该首字母设置样式。
/*让每个h2中第一个字母的大小是标题中其余字母大小的2倍*/h2:first-letter { font-size: 200%;}ログイン後にコピー 这个规则会导致用户代理(浏览器)对一个假想的元素作出响应，这个假想元素包含每个h2中的第一个字母。可能如下所示：
|
| :first-letter | :first-line |
| 所有的font属性 | 所有的font属性 |
| color | color |
| 所有background属性 | 所有background属性 |
| 所有margin属性 | |
| 所有padding属性 | |
| 所有border属性 | |
| text-decoration | text-decoration |
| vertical-align | vertical-align |
| text-transform | text-transform |
| line-height | line-height |
| float | |
| letter-spacing | letter-spacing |
| word-spacing |
h2:before { content: "before"; color: red;}h2:after { content: "after"; color: red;}所有伪元素都必须放在出现该伪元素的选择器的最后面，如果写成p: first-line em就是不合法的，因为伪元素在选择器主体前面出现。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7473
15
1377
52
77
11
19
30
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？
Mar 17, 2025 pm 12:20 PM
記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
HTML5＆lt; time＆gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素？
Mar 12, 2025 pm 04:05 PM
この記事では、html5＆lt; time＆gt;について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ（ISO 8601形式）のDateTime属性の重要性を強調し、Accessibilitを増やします
HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？
Mar 17, 2025 pm 12:27 PM
この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。
ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？
Mar 20, 2025 pm 05:56 PM
この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。
＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？
Mar 20, 2025 pm 06:05 PM
この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。
