CSS3で3つのセレクタ

セレクター：

CSS3柔軟な方法が大幅に見つける素子の効率と精度を向上させることができる多くの新しい要素を検索します。jQueryのセレクタでCSS3セレクタの最も提供との互換性
1. セレクタ属性：
A）E [属性は、プレゼンス属性attrで表すことができます。

DIV [クラス]

B）E [ATTR =ヴァル]属性値に正確に等しいヴァル。

DIV [クラス= mydemo]

C）E [ATTR * =ヴァル]の文字で表される属性値とval「任意の」位置を含みます。

divの[クラス* = mydemo]

D）E [ATTR ^ = valが]属性文字の値を表すとval「スタート」の位置が含まれています。

divの[クラス^ = mydemo]

e）の属性値valで表さE [attrの$ =ヴァル]は、文字と「終了」の位置が含まれています。

divの[クラス$ =デモ]
2つの擬似クラスセレクタ - 擬似要素セレクタ：

a）の研究に先立っ：：ホバー：アクティブ：：訪問したリンク

擬似フリー顔料構造を取得する親または兄弟クラスに対する元素に対してB）素子

F）E：第一子：この要素の親要素EのE最初の子要素を探します

G）E：最後の子：最後の子要素

H）E：n番目の子（N）：n番目の要素は、すべての兄弟要素Eを算出します

ⅰ）E：n番目の-最後の子（N）：Eで：n番目の子（n）を逆算を除いて、似ています

J）E：n番目の子（さえ）：全ての偶数

K）E：）n番目の子（奇数：すべての奇数

L）E：n番目の型（n）は：タイプを指定します

M）E：選択された要素Eの子ノードない空、注意そのスペースオペレータ素子

N）E：アンカーと共に使用するための目標、現在の要素内のアンカーが選択されます
- ハイライト）O：Nときのnの線形は、その値0,1,2,3,4を、変更...しかし、以下の<= 0、無効な選択
P）ケースコード：

/ *最初のli要素* /
リチウム：まず、子供{
    色：赤;
}
/ *最後の要素* /
リー：最後の子{ -
    色：緑;
}
/ *最初の10個の要素* /取得
のLi：N番目の-child（10）{
    色：オレンジ;
}
/ *最後から二番目の3 li要素* /取得
のLi：第N-ラスト子を{（3）
    色：パープル;
}
/ * 6つのli要素の複数のインデックス順序を取得します* /
リチウム：第N-子供（6N）{
    テキスト装飾：下線;
    ボーダー：ソリッドレッド1ピクセル;
}
/ *すべてのインデックスのli要素偶数* /取得
のLi：第N-子供（偶数）{
    境界を：1ピクセル黒一色;
}
/ *最初の5つのli要素* /取得
のLi：テラス、N番目（-n + 5）{
    背景色：#ddd;
}
/*获取除了第一个外的元素*/
li:nth-child(n+2){

}

c) n可是多种形式：nth-child(2n)、nth-child(2n+1)、nth-child(-n+5)等
三伪元素选择器：

a) 重点：E::before、E::after

i. 是一个行内元素，需要转换成块:display:block float:** position:

ii. 必须添加content,哪怕不设置内容，也需要content:””

iii. E:after、E:before 在旧版本里是伪类，在新版本里是伪元素，新版本下E:after、E:before会被自动识别为E::after、E::before，按伪元素来对待，这样做的目的是用来做兼容处理

iv. E::before: 定义在一个元素的内容之前插入content属性定义的内容与样式

v. E::after: 定义在一个元素的内容之后插入content属性定义的内容与样式

vi. 注意：

IE6、IE7与IE8（怪异模式Quirks mode）不支持此伪元素
CSS2中 E:before或者E:after，是属于伪类的，并且没有伪元素的概念，CSS3中提出伪元素的概念 E::before和E::after，并且归属到了伪元素当中，伪类里就不再存在E:before或者 E:after伪类

b) E::first-letter文本的第一个字母或字(不是词组)

c) E::first-line 文本第一行

d) E::selection 可改变选中文本的样式

转载于:https://www.cnblogs.com/qdxbls/p/11057759.html

おすすめ