css3 セレクター (パート 1)

1、给导航加分割線、左右

.nav li::前、.nav li::後{

コンテンツ:"";

位置:絶対;

top:14px;

高さ:25px;

幅:1px; 

}

.nav li::before{

左:0;

background:-webkit-linear-gradient(下へ,#f06254,#ffffff,#f06254);

background:-moz-linear-gradient(to bottom,#f06254,#ffffff,#f06254);

background:-o-linear-gradient(to bottom,#f06254,#ffffff,#f06254);

background:-ms-linear-gradient(to bottom,#f06254,#ffffff,#f06254);

background:linear-gradient(to bottom,#f06254,#ffffff,#f06254);

}

.nav li::after{

右:0;

background:-webkit-linear-gradient(下へ,#f06254,#bf554c,#f06254);

background:-moz-linear-gradient(to bottom,#f06254,#bf554c,#f06254);

background:-o-linear-gradient(to bottom,#f06254,#bf554c,#f06254);

background:-ms-linear-gradient(to bottom,#f06254,#bf554c,#f06254);

background:linear-gradient(to bottom,#f06254,#bf554c,#f06254);

}

.nav li:first-child::before{ background:none;}

.nav li:last-child::after{ background:none;}

2、

html代：

我链接的ですPDF文件

我类名はアイコン

我のタイトルはもっと">我のタイトルはもっと

css代码

a[クラス^=アイコン]{

背景: 緑;

color:#fff;//定义以icon开头の任意の文字列

}

a[href$=pdf]{

背景: オレンジ;

color: #fff;define href pdf で終わる任意の文字列

}

a[タイトル*=詳細]{

背景: 青;

color: #fff;title

で定義された任意の文字列

}

例:

a[クラス^=列]{

背景:#fc0001;

}

a[href$=doc]{

背景:#007d02;

}

a[タイトル*=ボックス]{

背景:#0000fe;

}

背景を赤にしたい

背景を赤にしたい

背景を赤にしたいです

背景を緑色にしたい

背景を緑色にしたい

背景を青にしたい

背景を青にしたい

背景を青にしたいです

3、

構造擬似クラスセレクターroot

:rootselector、文字通りルートセレクターとして明確に理解できます、

これは、要素 E が配置されているドキュメントのルート要素と一致することを意味します。 HTML ドキュメントでは、ルート要素は常に

です。

(":root" セレクターは、簡単に言えば、 要素と同等です。 :ルート{背景:オレンジ}

html {背景:オレンジ;}

得られる効果は同じです。

:root

メソッドの使用をお勧めします。

さらに、

IE

９では、“:root”を使用してhack関数を実装することもできます。 )

4

、

構造擬似クラスセレクター — ではありません

:not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。就拿form元素来说，比如说你想给表单中除submit按钮之外的input元素添加红色边框，CSS代码可以写成：form {

input:not([type="submit"]){

  border:1px solid red;

}//意思是除了type=submit意外的input边框为红色

 

 

 

5、结构性伪类选择器—empty

:empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。

比如说，你的文档中有三个段落p元素，你想把没有任何内容的P元素隐藏起来。我们就可以使用“:empty”选择器来控制。

HTML代码：

我是一个段落

 

​

CSS代码：

p{

 background: orange;

 min-height: 30px;

}

p:empty {

  display: none;

}​

6、结构性伪类选择器—target

:target选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。

例:

Brand

  content for Brand

Brand

 content for jake

Brand

    content for aron

CSSコード:

#ブランド:ターゲット {

背景: オレンジ;

色: #fff;

}

#ジェイク:ターゲット {

背景: 青;

色: #fff;

}

#アロン:ターゲット{

背景: 赤;

色: #fff;

}

7、構造擬似クラスセレクター—最初の子

":first-child"セレクターとは、親要素の最初の子要素である要素Eを選択することを意味します。簡単に理解すると、要素内の最初の子要素を選択することになります。これは子要素であり、子孫要素ではないことに注意してください。

HTMLコード:

1. リンク1
2. リンク2
3. リンク3

CSSコード:

ol>li:第一子{

色: 赤;

}//htmlの最初のシーケンス番号が赤色に変わり、順序なしリストの場合、フロントエンドのシーケンスアイコンの色が変わります

。

First-childは、last-child

の正反対です。

8、構造擬似クラスセレクター—nth-child(n)

「:nth-child(n)」 セレクターは、 親要素の 1 つ以上の特定の子要素を見つけるために使用されます。ここで、 "n" はパラメータであり、整数値 (1,2,3,4) または式 (2n+1, -n+5 ) を指定できます。 とキーワード (奇数, 偶数) ですが、パラメータ n の開始値は、0 ではなく、常に 1 です。つまり、パラメーター n の値が 0 の場合、セレクターは一致する要素を選択しません。

HTMLコード:

1. item1
2. 項目 2
3. 項目 3
4. 項目 4

CSSコード:

ol > li:nth-child(2n){

背景: オレンジ;

} // ":nth-child(n)" セレクターを渡し、パラメーターは式 "2n" を使用して偶数行リストの背景色をオレンジに設定します。

9、構造擬似クラスセレクター—nth-last-child(n)

":nth-last-child(n)"セレクターは、前の ":nth-child(n)"セレクターと非常によく似ていますが、"last"がもう 1 つある点が異なります。この関数は、":nth-child(n)"セレクターとは異なり、親要素の最後の子要素から開始して特定の要素を選択します

。

ol > li:nth-last-child(5){

背景: オレンジ;

}//リスト内の最後から 5 番目のリスト項目を選択し、その背景をオレンジに設定します。

10、first-of-typeセレクター

":first-of-type"selector は ":first-child"selector に似ていますが、違いは、要素のタイプを指定すること、主に親の下にある特定の要素を見つけるために使用されることですelement 型の最初の子要素。

":first-of-type" セレクターを使用して、div コンテナ内の最初の p 要素を配置します (p は必ずしもコンテナ要素の最初の子であるとは限りません)。背景色をオレンジに設定します。

.wrapper > p:first-of-type {

;

背景: オレンジ;

//最後の型

セレクター

":last-of-type"

セレクターは、":first-of-type"セレクターと同じ機能を持ちます。違いは、親要素の下にある特定の型の最後の子要素を選択することです。 。

11

、nth-of-type(n)セレクター

":nth-of-type(n)"

セレクターは、親要素で指定された特定の型の子のみをカウントする点を除いて、":nth-child(n)"セレクターと非常に似ています。要素。要素内の子要素が同じタイプの子要素だけではない場合、":nth-of-type(n)"セレクターを使用して、親要素内の特定のタイプの子要素を見つけるのが非常に便利です。そして便利です。 "n" in ":nth-of-type(n)"selector と ":nth-child(n)""n" in selector 同様ですパラメータには、特定の 整数、式、またはキーワードを指定できます。

例:

.wrapper > p:nth-of-type(2n){

背景: オレンジ;

}

":nth-of-type(2n)"セレクターを使用して、コンテナー"div.wrapper"内の偶数のセグメントの背景をオレンジ色に設定します。

18

、nth-last-of-type(n)セレクター

“:nth-last-of-type(n)”选择器和“:nth-of-type(n)”选择器是一样的，选择父元素中指定的某种子元素类型，但它的起始方向是从最后一个子元素开始，而且它的使用方法类似于上节中介绍的“:nth-last-child(n)”选择器一样。

通过“:nth-last-of-type(n)”选择器将容器“div.wrapper”中的倒数第三个段落背景设置为橙色。

.wrapper > p:nth-last-of-type(3){

  background: orange;

}

 

12、only-child选择器

“:only-child”选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。

示例演示

通过“:only-child”选择器，来控制仅有一个子元素的背景样式，为了更好的理解，我们这个示例通过对比的方式来向大家演示。

HTML代码：

  

我是一个段落

  

我是一个段落

  

我是一个段落

CSSコード:

.post p {

背景: 緑;

色: #fff;

パディング: 10px;

}

.post p:only-child {

背景: オレンジ;

}

13、only-of-typeセレクター

":only-of-type" セレクターは、親要素と同じ型の唯一の子要素である要素を選択するために使用されます。これは理解しにくいかもしれませんが、別の言い方をしましょう。 ":only-of-type" は、要素に多数のサブ要素があり、一意のサブ要素は 1 種類だけであることを意味します。 ":only-of-type" セレクターを使用できます。この要素内の唯一の type サブ要素を選択します。

デモ例

「:only-of-type」セレクターを使用して、コンテナ内の 1 つの div 要素のみの背景色をオレンジ色に変更します。

HTML

コード:

私は段落です

私は段落です

私は段落です

私は Div要素

です

私は Div

です

• 私はリスト項目です

私は段落です

CSS

コード:

.wrapper > div:only-of-type {

;

背景: オレンジ;

}