样式规则选择器

作者:Loncer 更多学习资源尽在:wwww.loncer.cn

HTML selector
就是HTML标签做为selector,这样在所有CSS应用的网页中,所有HTML标签都会按照所定义的语句来进行显示.
Class selector
要将一种HTML标签所创建的各个网页元素分成几类,则要将这个HTML标签的class设置成为不同的值:

例如:

p1

p2

p3

样式定义如下:

注:如果在样式表定义的时候,selector直接以(.)后接类名,这条样式规则就适用于所有class=该类名,的所有HTML标签. 即把class selector分为了两类:
1. 关联class selector: HTML标签名.类名(可以为同一元素定义不同的规则).
2. 独立class selector: .类名(可以为不同的元素定义相同的样式规则).
ID selector ID属性用来定义某一特定的HTML元素,一个网页文件中只能有一个元素使用某一ID值.

网页中:
text here

样式定义如下:
連想セレクターは、スペースで区切られた 2 つ以上の単一セレクターで構成される文字列を指します。
例:
p em {background: yellow}
「p em」これは連想セレクターです。これは、
タグペア内の
タグペア間のコンテンツの背景が黄色であり、他の場所のタグペア内のコンテンツは影響を受けないことを意味します。
注: 関連付けの選択は定義されており、ルールが適用されます。単一のセレクターによって定義されたルールよりも優先されます。

セレクターの組み合わせスタイルシートでの繰り返しの宣言を減らすために、複数のセレクターを 1 つのスタイルルール定義に組み合わせることができます。
例: H1、H2、H3、H4、H5、H6、TD{color:red}

擬似要素セレクターは、同じ HTML 要素とそれに含まれるコンテンツの一部のさまざまな状態を定義する方法を指します。
形式は次のとおりです: HTML 要素: 擬似要素の周期 {属性:値}
一般的に使用される疑似要素は次のとおりです

要素名機能

A: アクティブハイパーリンクが選択されている状態

A: ホバーカーソルがハイパーリンクに移動したときの状態

A:リンク何もしていない状態

A: 訪問しました訪問したハイパーリンクのステータス

P:第一行段落内のテキストの最初の行

P:最初の文字段落の最初の文字

クラスセレクターは疑似要素とともに使用できます:
HTML 要素.クラス名:pseudo-element {属性:値}

要素名	機能
A: アクティブ	ハイパーリンクが選択されている状態
A: ホバー	カーソルがハイパーリンクに移動したときの状態
A:リンク	何もしていない状態
A: 訪問しました	訪問したハイパーリンクのステータス
P:第一行	段落内のテキストの最初の行
P:最初の文字	段落の最初の文字