ホームページ  >  記事  >  ウェブフロントエンド  >  CSS3の基本セレクターの詳しい解説_html/css_WEB-ITnose

CSS3の基本セレクターの詳しい解説_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 12:00:07951ブラウズ

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 までご連絡ください。