検索
ホームページウェブフロントエンド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 までご連絡ください。
如何调整HTML文本框的大小如何调整HTML文本框的大小Feb 20, 2024 am 10:03 AM

HTML文本框大小的设定在前端开发中是非常常见的操作。本文将介绍如何设置文本框的尺寸,并提供具体的代码示例。在HTML中,可以使用CSS来设置文本框的尺寸。具体的代码如下:input[type="text"

如何调整WordPress主题避免错位显示如何调整WordPress主题避免错位显示Mar 05, 2024 pm 02:03 PM

如何调整WordPress主题避免错位显示,需要具体代码示例WordPress作为一个功能强大的CMS系统,受到了许多网站开发者和站长的喜爱。然而,在使用WordPress创建网站时,经常会遇到主题错位显示的问题,这对于用户体验和页面美观都会造成影响。因此,合理调整WordPress主题以避免错位显示是非常重要的。本文将介绍如何通过具体的代码示例来进行主题调

了解CSS选择器通配符的权重和优先级的深层次理解了解CSS选择器通配符的权重和优先级的深层次理解Dec 26, 2023 pm 01:36 PM

深入理解CSS选择器通配符的权重和优先级在CSS样式表中,选择器是用来指定样式应用于哪些HTML元素的重要工具。选择器的优先级和权重决定了当多个规则同时作用于一个HTML元素时,应用哪个样式。通配符选择器是CSS中一种常见的选择器。它使用“*”符号表示,表示匹配所有HTML元素。通配符选择器虽然简单,但在某些情况下非常有用。然而,通配符选择器的权重和优先级也

css选择器哪些是高级选择器css选择器哪些是高级选择器Oct 07, 2023 pm 02:59 PM

css选择器中的高级选择器有后代选择器、子元素选择器、相邻兄弟选择器、通用兄弟选择器、属性选择器、类选择器、ID选择器、伪类选择器和伪元素选择器等。详细介绍:1、后代选择器使用空格分隔的选择器,表示选取某个元素的后代元素;2、子元素选择器使用大于号分隔的选择器,表示选取某个元素的直接子元素;3、相邻兄弟选择器使用加号分隔的选择器,表示选取紧接在某个元素后面的第一个兄弟元素等等。

css选择器排除部分的元素是什么css选择器排除部分的元素是什么Apr 06, 2024 am 02:42 AM

:not() 选择器可用于排除特定条件的元素,其语法为 :not(selector) {样式规则}。示例::not(p) 排除所有非段落元素,li:not(.active) 排除非活动列表项,:not(table) 排除非表格元素,div:not([data-role="primary"]) 排除非 primary 角色的 div 元素。

深入学习响应式布局框架:适合初学者到专家的详尽指南深入学习响应式布局框架:适合初学者到专家的详尽指南Feb 19, 2024 pm 05:43 PM

响应式布局框架解析:从初学者到专家的必备指南随着移动设备的普及和多样化,响应式布局成为了现代Web设计的必备技能。响应式布局框架以其简单、灵活和可维护的特点,成为了开发者们的首选工具。然而,对于初学者来说,学习和理解响应式布局框架可能会感到有些困惑。本文将从初学者到专家,为您提供一个详细的指南,帮助您掌握响应式布局框架,同时提供具体的代码示例。什么是响应式布

学会使用CSS选择器的基本语法学会使用CSS选择器的基本语法Jan 13, 2024 am 11:44 AM

掌握基本的CSS选择器语法,需要具体代码示例CSS选择器是前端开发中非常重要的一部分,它可以用来选择和修改HTML文档的各个元素。掌握基本的CSS选择器语法对于编写高效的样式表是至关重要的。本文将介绍一些常见的CSS选择器以及对应的代码示例。元素选择器元素选择器是最基本的选择器,可以通过元素的标签名来选择对应的元素。例如,要选择所有的段落(p元素),可以使用

CSS样式无法正常显示的解决方式CSS样式无法正常显示的解决方式Feb 24, 2024 pm 01:18 PM

CSS显示不出来怎么办,需要具体代码示例CSS(层叠样式表)是一种用于描述网页元素样式的标记语言,通过设定不同的样式规则,可以控制网页的布局、颜色、字体等外观效果。然而,有时候我们会遇到CSS显示不出来的问题,导致网页无法正常呈现所设定的样式。本文将介绍一些常见的CSS显示问题,并提供具体的代码示例来解决这些问题。引入CSS文件错误在头部(

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ヘンタイを無料で生成します。

ホットツール

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

DVWA

DVWA

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

SublimeText3 英語版

SublimeText3 英語版

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

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン