Lesson03_02 スタイルルールセレクター_基本チュートリアル

样式规则选择器

作者: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 {属性:値}