CSSで一般的に使用されるセレクター誘導

要素セレクター(要素はラベル、ラベルは要素)

	作用:通过元素选择器可以选中页面中的所有指定元素
	语法:标签名{}

IDセレクター

	-通过我们的元素的id属性值选中唯一的一个元素
	-语法:
	#id属性值{}

クラスセレクター

(id属性と同様に、要素のクラス属性を設定でき
ますが、クラス属性を繰り返すことができます。
同じクラス属性値を持つ要素の場合、それらは要素のグループであると言え
ます。設定できます。スペースで区切られた複数の値の間で、同時に値を持つ要素の複数のクラス属性)

-通过元素的class属性值选中一组元素
-语法:
	.class属性值{}

セレクターのグループ化(ユニオンセレクター)

	-通过选择器分组可以同时选中多个选择器对应的元素
	-语法:选择器1,选择器2,选择器3...选择器N{}

ワイルドカードセレクター

-可以选择页面中的所有元素
-语法:*{}

コンポジットセレクター(交差点セレクター)

-作用:
	可以选中同时满足多个选择器的元素
-语法:
	-选择器1选择器2选择器N{}

注:IDセレクターの場合、複合セレクターの使用はお勧めしません

要素間の関係
	父元素:直接包含子元素的元素
	子元素:直接被父元素包含的元素
	祖先元素:直接或间接包含后代元素的元素,父元素也是祖先元素
	后代元素:直接或间接被祖先元素包含的元素,子元素也是后代元素
	兄弟元素:拥有相同父元素的叫做兄弟元素

子孫要素セレクター

	-作用:选择指定元素的指定后代元素
	-语法:祖先元素 后代元素{}

子要素セレクター

	-作用:选中指定父元素的指定子元素	
	-语法:父元素>子元素

IE6以下のブラウザは互換性がありません

擬似クラスセレクター

疑似クラスは、次のような要素の特別な状態を表すために特に使用されます:フォーカス
取得するテキストボックスなどの通常のハイパーリンクなどの訪問済みハイパーリンクこれらの特別な状態の時間に要素のスタイルを設定する必要がある場合は、次を使用できます疑似クラス

	:link
		-表示普通的链接(没有访问过的链接)
	:visited
		-表示访问过的链接

ブラウザは、リンクの1つが履歴レコードを介してアクセスされたかどうかを判断します。
ユーザーのプライバシーの問題により、アクセスされた疑似クラスはフォントの色のみを設定できます(ここではIE6のみがフォントの背景色を設定できます)

	:hover
		-表示鼠标移入的一个状态		
	:active
		-表示超链接被点击的一个状态

上記の2つは、他の要素にも設定できます(IE6は、ハイパーリンク以外の要素にこれら2つの疑似クラスを設定することをサポートしていません)

上記の2つは、他の要素にも設定できます(IE6は、ハイパーリンク以外の要素にこれら2つの疑似クラスを設定することをサポートしていません)

	:focus
		-获取焦点
	:selection
		-选择的内容使用样式

:この疑似クラスは、Firefoxで別の方法で記述する必要があります。
-moz -selection{} -moz- Firefox固有のロゴ
複数のブラウザーと互換性が必要な場合は、ここでこれら2つの文を同時に使用できます。

疑似要素セレクター

疑似要素を使用して、要素内のいくつかの特別な位置を表します

:first-letter

	-为p中第一个字符元素来设置一个特殊的样式(首字母)

:first-line

	-为p中的第一行元素设置一个特殊样式(首行)

:before

	-表示元素最前面的位置(部分)

    -一般我们的before都需要结合content这个样式一起使用,

通过content也可以向before或after的位置添加一些内容

:after

    -表示元素最后面的位置(部分)结束标签的前面

属性セレクター

作用:可以根据元素中的属性或属性值来选取指定元素

语法:

​			[属性名]选取含有指定属性的元素

​			[属性名="属性值"]选取含有指定属性值的元素

​			[属性名^="属性值"]选取属性值以指定内容开头的元素

​			[属性名$="属性值"]选取属性值以指定内容结尾的元素

​			[属性名*="属性值"]选取属性值以包含指定内容的元素

タイトル属性。この属性は任意のラベルに指定できます。ラベルが要素に移動されると、要素のタイトル属性の値がプロンプトテキストとして表示されます。

子要素の擬似クラス

:first-child 可以选中第一个子元素

:last-child 可以选中最后一个子元素

:nth-child(n)可以选择任意位置的子元素(n代表的是第几个元素)

该选择器的后面还可以指定一个参数,选定要选中的第几个子元素

even  表示偶数位置的子元素

odd   表示奇数位置的子元素



:first-of-type

:last-of-type

:nth-of-type

​上面三个和:first-child这些非常类似,只不过child,是在所有的子元素中进行排列,而type,是在当前的类型的子元素中进行排列


兄弟要素セレクター

次の兄弟セレクター(隣接する兄弟セレクター)
作用:可以选中一个元素后紧挨着的指定的兄弟元素

语法:前一个+后一个
背後にあるすべての兄弟要素を選択します(兄弟セレクター)
作用:选中该元素后面的所有兄弟元素

语法:前一个~后面所有

負の疑似クラス

作用:可以从已选中的元素中剔除出某些元素

语法:     :not(选择器)

CSS3セレクターサマリーグラフ

ここに画像の説明を挿入

おすすめ

転載: blog.csdn.net/qq_42592823/article/details/114850680