検索
ホームページウェブフロントエンドCSSチュートリアルCSSセレクターにはどのような種類がありますか?一般的な CSS セレクターの簡単な紹介

この記事では、CSS セレクターの使用方法について説明します。どのようなタイプがありますか?一般的に使用される CSS セレクターの簡単な紹介は、必要な場合に参考にしていただければ幸いです。

cssタグセレクター

機能: ページ上の指定されたすべての要素を選択します

構文: タグ名: {}

id selector

機能: id 属性値を通じて要素内の唯一の要素を選択します

構文: #id{}

css クラス セレクター

機能: 要素のクラス属性値を通じて要素のグループを選択します

構文: .class 属性値{}

1 つの要素に対して複数の要素を設定できます。クラス属性値を同時に指定、複数の値はスペースで区切ります

セレクターのグループ化(ユニオンセレクター)

機能: セレクターのグループ化により、複数のセレクターに対応する要素を同時に選択できます

構文: セレクター1、セレクター 2、セレクター N{}

例: ID を p3 として選択し、クラス属性値に p2 タグと h1 タグが含まれる

                 #p3,.p2,h1{
                                  background-color: yellow;
                            }

css ワイルドカード セレクター

機能: ページ上のすべての要素を選択します

構文: *{}

CSS 交差セレクター (複合セレクター)

機能: 複数のセレクターを満たす要素を同時に選択できます

構文: セレクター 1 セレクター 2 セレクター N{}

注 : ID は一意であるため、要素を決定します。id の交差セレクターは使用しません

例: class 属性値に p4 が含まれるスパンを選択します

span.p4{
                                    background-color:#4169E1;
                           }

要素間の関係:

親要素: 子要素を直接含む要素。

子要素: 親要素に直接含まれる要素。

先祖要素: 子孫要素を直接または一時的に含む要素。親要素は先祖要素でもあります。

子孫要素: 祖先要素に直接または間接的に含まれる要素、および子要素も子孫要素です。

兄弟要素: 同じ親要素を持つ要素。

css子孫要素セレクター

機能: 指定された要素の子孫要素を選択します

構文: 先祖要素子孫要素{}

例: divのスパンを選択

  div span {
                                        color: chartreuse;
                                }

css子要素セレクター(IE6および以下のブラウザは非対応です)

機能:指定された親要素の指定された子要素を選択

構文:親要素>子要素

例:div内のspanを選択

                 div>span{
                              background-color: yellow;
                     }

擬似クラスセレクターを使用して表現します要素は特別な状態です。

例: 訪問したハイパーリンク、通常のハイパーリンク、フォーカスのあるテキストボックス

これらの特殊な状態の要素にスタイルを設定する必要がある場合、疑似クラスを使用して接続のスタイルを定義できます

通常のリンク: a:リンク

訪問したリンク: a:visited (色のみ定義可能)

マウスがスライドするリンク: a:hover

クリックされたリンク: a:active

a:link と a: 訪問した間の順序は指定されていませんが、それらは a:hover と a:active の前にある必要があり、a:hover は a:active の前にある必要があります

hover と active は、p:hover p: などの他の要素にも設定できます。 active ただし、IE6 以下は

その他の疑似クラスをサポートしていません:

:focus フォーカスを取得

:before 要素を指定する前

:after 要素を指定した後

::selection 選択された要素 (これは、 Firefox で使用されます::- moz-selection)

要素内のいくつかの特別な位置を表すために疑似要素を使用します

:first-letter: 最初の文字

:fist-line: 文字の最初の行

:before: 要素の先頭部分を表します

通常、before はコンテンツスタイルと組み合わせて使用​​する必要があります

content を通じて before または after の位置にコンテンツを追加できます

:after : を表します。要素の最後の辺

p タグに最初の文字を入れます 黄色の 25px に設定します

   p:first-letter{
                        color:yellow;
                        font-size: 25px;
                    }
                   p:first-line{
                       background: #FF0000;
                   }
                  将content的内容添加到p元素的最前面
                   p:before{
                       content: "ABC";
                   }
                   将content的内容添加到p元素的最后面
                   p:after{
                       content: "DEF";
                   }

css 属性セレクター

機能: 要素内の属性または属性値に基づいて、指定された要素を選択できます

構文: [属性名] 指定した属性を持つ要素を選択

[属性名=属性値] 指定した属性値を含む要素を選択

[属性名^=属性値] 指定した内容で属性値が始まる要素を選択

[属性名$=属性値] 属性値が指定した内容で終わる要素を選択

[属性値*=属性値] 属性値に指定した内容が含まれる要素を選択

    /*为具有title属性的p元素设置背景颜色*/
                p[title]{
                     color: darkorchid;
                }
                /*为title属性值为hello的元素设置一个背景颜色*/
                p[title=hello]{
                     background-color: cornflowerblue;
                }
                /*为title属性是ab开头的元素设置一个背景颜色*/
                p[title^="ab"]{
                     background-color: chartreuse;
                }
                p[title$="d"]{
                     font-size: 28px;
                }

疑似クラスの子要素セレクター

:first-child : 最初の子要素を選択できます

:last-child : 最後の要素を選択できます

:nth-child : 任意の位置の子要素を選択できます

パラメータを指定できます選択する要素を指定するセレクターの後

even: 偶数

odd: 奇数 --of-type

last-of-type

nth-of-type

は、xxx-chlidに似ています。でも××× -child はすべての要素から選択され、xxx-of-type は指定された type から選択されます

例: 最初の p タグを選択します

p:first-child{
                           color:coral;
                      }
                     选中第3个p标签
                     p:nth-child(3){
                           color:chartreuse;
                     }
                     设置表格奇偶行背景颜色不同
                     tr:nth(even){
                                background-color:pink; 
                     }
                    
                     tr:nth(odd){
                                background-color:skyblue; 
                     }

次の兄弟要素セレクター

機能: 直後に指定された兄弟要素を選択できます要素

语法:前一个+后一个

例:选中p标签后的相邻的兄弟span(p和span不一定相邻)

  p+span{
                                     color:red;
                            }

选中后边的所有兄弟元素

语法:前一个~后边所有 

否定伪类:

 作用:从选种的元素中剔除某些元素

语法: :not(选择器)

例:为所有的p元素设置一个背景颜色,出了class为hello或hello2的元素

              p:not(.hello):not(.hello2){
                                  background-color: antiquewhite;
                          }

相关文章推荐:

什么是css?css三种样式以及文字属性的介绍

CSS布局有哪些?css常见的布局方式(附代码)

以上がCSSセレクターにはどのような種類がありますか?一般的な CSS セレクターの簡単な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
Google Fontsをタグ付けし、Goofonts.comを作成する方法Google Fontsをタグ付けし、Goofonts.comを作成する方法Apr 12, 2025 pm 12:02 PM

Goofontsは、開発者妻とデザイナーの夫によって署名されたサイドプロジェクトであり、どちらもタイポグラフィの大ファンです。 Googleにタグを付けています

時代を超越したWeb開発記事時代を超越したWeb開発記事Apr 12, 2025 am 11:44 AM

Pavithra Kodmadは、彼らが変化したWeb開発に関する最も時代を超越した記事のいくつかであると考えていることについて、人々に推奨事項を求めました

セクション要素との取引セクション要素との取引Apr 12, 2025 am 11:39 AM

2つの記事がまったく同じ日に公開されました。

graphQlの練習JavaScript APIでクエリをクエリしますgraphQlの練習JavaScript APIでクエリをクエリしますApr 12, 2025 am 11:33 AM

GraphQL APIの構築方法を学ぶことは非常に挑戦的です。ただし、10分でGraphQL APIを使用する方法を学ぶことができます!そして、それは私が完璧になったことがあります

コンポーネントレベルのCMSコンポーネントレベルのCMSApr 12, 2025 am 11:09 AM

コンポーネントがデータが近くに住んでいる環境に住んでいる場合、視覚コンポーネントと

円にタイプを設定します...オフセットパス付き円にタイプを設定します...オフセットパス付きApr 12, 2025 am 11:00 AM

ここでは、Yuanchuanからの合法的なCSSの策略があります。このCSSプロパティオフセットパスがあります。むかしむかし、それはモーションパスと呼ばれ、その後改名されました。私

CSSで「戻る」ことは何をしますか?CSSで「戻る」ことは何をしますか?Apr 12, 2025 am 10:59 AM

Miriam Suzanneは、このテーマに関するMozilla開発者のビデオで説明しています。

現代の恋人現代の恋人Apr 12, 2025 am 10:58 AM

私はこのようなものが大好きです。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

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

ホットツール

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境