検索
ホームページウェブフロントエンドhtmlチュートリアルCSS3の基本セレクターの詳しい解説_html/css_WEB-ITnose

CSS セレクター は、毎日使用しているので誰もがよく知っていると思いますが、CSS3 セレクター については、柔軟に使用する必要があり、特に多くの友人にとってはまだ難しいと思いますは、CSS3 の :n 番目のセレクターです。そこでここからは、バージョン間の違いは置いておいて、CSS セレクターの使い方を最初から見てみましょう。

CSS は、HTML、XML などを画面上にレンダリングするために使用される言語です。CSS は主に、対応する要素にスタイルを適用して、相対的に適用される要素を選択することが非常に重要です。対応する要素にはセレクターと呼ばれるものが必要です。セレクターは主に、HTML のツリー構造内の DOM 要素ノードを決定するために使用されます。 CSS セレクター を 3 つの部分に分割します。最初の部分を基本セレクターと呼び、2 番目の部分を疑似セレクターと呼びます。セレクターですが、この部分は理解して習得するのが最も難しい部分でもあります。今日は最初の部分、つまり基本的なセレクターを見ていきます。まず、一般的に使用されるセレクター リストの図を見てみましょう

まず、上の表の基本的なセレクターの使用方法とその機能を見てみましょう。問題をよりよく説明するために、最初に単純な DOM を作成します。構造は次のとおりです。 :

<div class="demo"> <ul class="clearfix"> <li id="first" class="first">1</li> <li class="active important">2</li> <li class="important items">3</li> <li class="important">4</li> <li class="items">5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li id="last" class="last">10</li> </ul> </div>

このデモにいくつかのスタイルを追加して見栄えを良くします

 .demo { width: 300px; border: 1px solid #ccc; padding: 10px; } li { float: left; height: 20px; line-height: 20px; width: 20px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; text-align: center; background: #f36; color: green; margin-right: 5px; }

初期効果は次のとおりです:

1. ワイルドカード セレクター (*)

ワイルドカード セレクターは、すべての要素を選択するために使用されます。特定の要素の下にあるすべての要素も選択します。例:

 *{ marigin: 0; padding: 0; }

リセット スタイル ファイルで上記のコードをよく見たことがあるはずです。これは、すべての要素のマージンとパディングが 0 に設定されていることを意味します。もう 1 つの方法は、特定の要素の下にあるすべての要素を選択することです。 :

      .demo * {border:1px solid blue;}

効果は次のとおりです。

div.demo の下の要素の境界線に新しいスタイルが追加されている場合、その効果は次のとおりです。 すべてのブラウザはワイルドカード セレクターをサポートしています。

2. 要素セレクター (E)

要素セレクターは、CSS セレクターの中で最も一般的で基本的なセレクターです。要素セレクターは、実際には、html、body、p、div などのドキュメントの要素です。たとえば、デモでは、要素には div、ul、li などが含まれます。

li {background-color: grey;color: orange;}

選択ページを表す li 要素で背景色と前景色を設定すると、効果は次のようになります:

すべてのブラウザは要素セレクター (E) をサポートします。

3. クラス セレクター (.className)

クラス セレクターは、ドキュメント要素から独立した方法でスタイルを指定します。クラス セレクターを使用する前に、html 要素でクラス名を定義する必要があります。つまり、クラスを選択できるように、クラスの名前が HTML タグに存在することを確認する必要があります。次のようになります。

<li class="active important items">2</li>

合計の「アクティブ、重要、アイテム」は、クラス名を追加することを意味しますli をクラスに関連付けることで、クラス セレクターが適切に機能し、クラス セレクターのスタイルを要素とより適切に関連付けることができます。

.important {font-weight: bold; color: yellow;}

上記のコードは、重要なクラス名を持つ要素に「太字フォントと黄色」スタイルを追加することを意味します (例:

クラス セレクターは、要素セレクターと組み合わせて使用​​することもできます。たとえば、ドキュメント内にはクラス名「items」を使用する要素が多数ありますが、p 要素のクラス名のスタイルのみを変更したい場合は、次のように対応するスタイルを選択して追加できます:

       p.items {color: red;}

上記コードのみが一致します。クラス属性に important が含まれるすべての p 要素は一致しませんが、クラス名「items」の要素を含む他のタイプの要素は一致しません。前述したように、「p.items」は p にのみ一致します。要素があり、クラス名は「items」です。この2つの条件を満たさない方は選考対象外となります。

クラス セレクターは複数のクラス名を持つこともできます。上で見たように、li 要素には同時に 2 つ以上のクラス名があり、それらはスペースで区切られています。その後、複数のクラスを使用してセレクターを接続することもできます。 . 、例:

 .important {font-weight: bold;} .active {color: green;background: lime;} .items {color: #fff;background: #000;} .important.items {background:#ccc;} .first.last {color: blue;}

上のコードに示すように、「. important.items」セレクターは、次の図に示すように、「重要」クラスと「項目」クラスの両方を含む要素に対してのみ機能します。注意する必要があるのは、マルチクラス セレクターに含まれるクラス名の 1 つが存在しない場合、セレクターは一致する要素を見つけることができないことです。たとえば、このコードでは、一致する要素は見つかりません。一致する要素を見つけることができます。リストには li.first と li.last が 1 つしかないため、li.first.last というリスト項目はありません:

 .first.last {color: blue;}

すべてのブラウザはクラス セレクターをサポートしています。 、ただし多くのクラス セレクター (.className1.className2) は IE6 ではサポートされていません。

四、id选择器(#ID)

ID选择器和上面说的类选择器是很相似的,在使用ID选择器之前也需要先在html文档中加注ID名称,这样在样式选择器中才能找到相对应的元素,不同的是ID选择器是一个页面中唯一的值,我们在类使用时是在相对应的类名前加上一个“.”号(.className)而id选择器是在名称前使用"#"如(#id),

   #first {background: lime;color: #000;}   #last {background: #000;color: lime;}

上在的代码就是选择了id为"first"和"last"的列表项,其效果如下

ID选择器有几个地方需要特别注意的,第一:一个文档中一个id选择器只充许使用一次,因为id在页面中是唯一的;第二,id选择器不能像类选择器一样多个合并使用,一个元素只能命名一个id名;第三,可以在不同的文档中使用相同的id名,比如说在“test.html”中给h1定了“#important”,也可以给“test1.html”中定义p的id为"#important",但前提是不管在test.html还是test1.html中只充许有一个id叫"#important"的存在。

所有浏览器都支持ID选择器。

那么什么时候采用id命名?什么时候采用类命名呢?我个人认为就是关键的一点就是具有唯一性使用id选择器;公用的,类似的使用类选择器。使用这两个选择器时,最好区别大小写。

五、后代选择器(E F)

后代选择器也被称作包含选择器,所起作用就是可以选择某元素的后代元素,比如说:E F,前面E为祖先元素,F为后代元素,所表达的意思就是选择了E元素的所有后代F元素,请注意他们之间需要一个空格隔开。这里F不管是E元素的子元素或者是孙元素或者是更深层次的关系,都将被选中,换句话说,不论F在E中有多少层关系,都将被选中:

			.demo li {color: blue;}

上面表示的是,选中div.demo中所有的li元素

所有浏览器都支的后代选择器。

六、子元素选择器(E>F)

子元素选择器只能选择某元素的子元素,其中E为父元素,而F为子元素,其中E>F所表示的是选择了E元素下的所有子元素F。这和后代选择器(E F)不一样,在后代选择器中F是E的后代元素,而子元素选择器E > F,其中F仅仅是E的子元素而以。

ul > li {background: green;color: yellow;}

上在代码表示选择ul下的所有子元素li。如:

IE6不支持子元素选择器。

七、相邻兄弟元素选择器(E + F)

相邻兄弟选择器可以选择紧接在另一元素后的元素,而且他们具有一个相同的父元素,换句话说,EF两元素具有一个相同的父元素,而且F元素在E元素后面,而且相邻,这样我们就可以使用相邻兄弟元素选择器来选择F元素。

				li + li {background: green;color: yellow; border: 1px solid #ccc;}

上面代码表示选择li的相邻元素li,我们这里一共有十个li,那么上面的代码选择了从第2个li到 10 个li,一共九个,请看效果:

因为上面的li+li其中第二li是第一li的相邻元素,第三个又是第二个相邻元素,因此第三个也被选择,依此类推,所以后面九个li都被选中了,如果我们换过一种方式来看,可能会更好的理解一点:

.active + li {background: green;color: yellow; border: 1px solid #ccc;}

按照前面所讲的知识,这句代码很明显选择了li.active后面相邻的li元素,注意了和li.active后面相邻的元素仅只有一个的。如图:

IE6不支持这个选择器

八、通用兄弟选择器(E ? F)

通用兄弟元素选择器是CSS3新增加一种选择器,这种选择器将选择某元素后面的所有兄弟元素,他们也和相邻兄弟元素类似,需要在同一个父元素之中,换句话说,E和F元素是属于同一父元素之内,并且F元素在E元素之后,那么E ~ F 选择器将选择中所有E元素后面的F元素。比如下面的代码:

			.active ~ li {background: green;color: yellow; border: 1px solid #ccc;}

上面的代码所表示的是,选择中了li.active 元素后面的所有兄弟元素li,如图所示:

通用兄弟选择器和相邻兄弟选择器极其相似,只不过,相邻兄弟选择器仅选择是元素的仅与其相邻的后面元素(选中的仅一个元素);而通用兄弟元素选择器,选中的是元素相邻的后面兄弟元素,这样说起来可能会有迷糊,大家可以仔细看看其相邻兄弟的效果图。

IE6不支持这种选择器的用法。

九、群组选择器(selector1,selector2,...,selectorN)

群组选择器是将具有相同样式的元素分组在一起,每个选择器之间使用逗号“,”隔开,如上面所示selector1,selector2,...,selectorN。这个逗号告诉浏览器,规则中包含多个不同的选择器,如果不有这个逗号,那么所表达的意就完全不同了,省去逗号就成了我们前面所说的后代选择器,这一点大家在使用中千万要小心加小心。我们来看一个简单的例子:

.first, .last {background: green;color: yellow; border: 1px solid #ccc;}

因为li.first和li.last具有相同的样式效果,所以我们把他们写到一个组里来:

所有浏览器都支持群组选择器。

上面九种选择器是CSS3中的基本选择器,而我们最常用的是元素选择器、类选择器、ID选择器、后代选择器、群组选择器,同时大家可以在实际应用中把这些选择器结合起来使用,达到目的就行了。那么关于CSS3选择器的第一部分??基本选择器就介绍到这里,有点简单,希望对初次接触CSS的同学有所帮助,下节将介绍CSS3选择器的第二部分??属性选择器,感兴趣的朋友请观注本站的更新。

感谢W3CPLUS提供精彩原文。

欢迎大家加入互联网技术交流群:62329335 

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
css怎么隐藏元素但不占空间css怎么隐藏元素但不占空间Jun 01, 2022 pm 07:15 PM

两种方法:1、利用display属性,只需给元素添加“display:none;”样式即可。2、利用position和top属性设置元素绝对定位来隐藏元素,只需给元素添加“position:absolute;top:-9999px;”样式。

原来利用纯CSS也能实现文字轮播与图片轮播!原来利用纯CSS也能实现文字轮播与图片轮播!Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

css3什么是自适应布局css3什么是自适应布局Jun 02, 2022 pm 12:05 PM

自适应布局又称“响应式布局”,是指可以自动识别屏幕宽度、并做出相应调整的网页布局;这样的网页能够兼容多个不同的终端,而不是为每个终端做一个特定的版本。自适应布局是为解决移动端浏览网页而诞生的,能够为使用不同终端的用户提供很好的用户体验。

css3如何实现鼠标点击图片放大css3如何实现鼠标点击图片放大Apr 25, 2022 pm 04:52 PM

实现方法:1、使用“:active”选择器选中鼠标点击图片的状态;2、使用transform属性和scale()函数实现图片放大效果,语法“img:active {transform: scale(x轴放大倍数,y轴放大倍数);}”。

css3动画效果有变形吗css3动画效果有变形吗Apr 28, 2022 pm 02:20 PM

css3中的动画效果有变形;可以利用“animation:动画属性 @keyframes ..{..{transform:变形属性}}”实现变形动画效果,animation属性用于设置动画样式,transform属性用于设置变形样式。

css3怎么设置动画旋转速度css3怎么设置动画旋转速度Apr 28, 2022 pm 04:32 PM

在css3中,可以利用“animation-timing-function”属性设置动画旋转速度,该属性用于指定动画将如何完成一个周期,设置动画的速度曲线,语法为“元素{animation-timing-function:速度属性值;}”。

一文了解CSS3中的新特性 ::target-text 选择器一文了解CSS3中的新特性 ::target-text 选择器Apr 12, 2022 am 11:24 AM

本篇文章带大家一起深入了解一下CSS3中的新特性::target-text 选择器,聊聊该选择器的作用和使用方法,希望对大家有所帮助!

css3线性渐变可以实现三角形吗css3线性渐变可以实现三角形吗Apr 25, 2022 pm 02:47 PM

css3线性渐变可以实现三角形;只需创建一个45度的线性渐变,设置渐变色为两种固定颜色,一个是三角形的颜色,另一个为透明色即可,语法“linear-gradient(45deg,颜色值,颜色值 50%,透明色 50%,透明色 100%)”。

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

ホットツール

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SecLists

SecLists

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

Safe Exam Browser

Safe Exam Browser

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

EditPlus 中国語クラック版

EditPlus 中国語クラック版

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

mPDF

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。