div+css-CSS標準-5.8.3 Class selectors-Classセレクタ

7567 ワード

div+css-CSS標準-5.8.3 Class selectors-Classセレクタ








Working with HTML, authors may use the period ( . ) notation as an alternative to the ~= notation when representing the class attribute. Thus, for HTML, div.value and div[class~=value] have the same meaning. The attribute value must immediately follow the "period"( . ). UAs may apply selectors using the period (.) notation in XML documents if the UA has namespace specific knowledge that allows it to determine which attribute is the "class"attribute for the respective namespace. One such example of namespace specific knowledge is the prose in the specification for a particular namespace (e.g. SVG 1.1 [SVG11] describes the SVG "class"attribute and how a UA should interpret it, and similarly MathML 2.0 [MATH20] describes the MathML "class"attribute.)
Example(s):
For example, we can assign style information to all elements with class~="pastoral"as follows:
*.pastoral { color: green }  /* all elements with class~=pastoral */

or just
.pastoral { color: green }  /* all elements with class~=pastoral */

The following assigns style only to H1 elements with class~="pastoral":
H1.pastoral { color: green }  /* H1 elements with class~=pastoral */

Given these rules, the first H1 instance below would not have green text, while the second would:

Not green


Very green



To match a subset of "class"values, each value must be preceded by a ".".
Example(s):
For example, the following rule matches any P element whose "class"attribute has been assigned a list of space-separated values that includes "pastoral"and "marine":
p.marine.pastoral { color: green }
This rule matches when class="pastoral blue aqua marine"but does not match for class="pastoral blue".
Note. CSS gives so much power to the "class"attribute, that authors could conceivably design their own "document language"based on elements with almost no associated presentation (such as DIV and SPAN in HTML) and assigning style information through the "class"attribute. Authors should avoid this practice since the structural elements of a document language often have recognized and accepted meanings and author-defined classes may not.
Note: If an element has multiple class attributes, their values must be concatenated with spaces between the values before searching for the class. As of this time the working group is not aware of any manner in which this situation can be reached, however, so this behavior is explicitly non-normative in this specification.

[5.8.3 Class selectors-Classセレクタ-CSS標準ドキュメント]


http://www.w3.org/TR/CSS21/selector.html#class-html

[class属性-IEドキュメント]


http://msdn2.microsoft.com/en-us/library/ms533560.aspx



[div+css-キーワード]

div css

[div+css-フォーラム]

http://WebDev.board.newsmth.net/
http://WebGeeks.board.newsmth.net/
http://bbs.pku.edu.cn/あ、homepage見版
http://forum.csdn.net/SList/HTMLCSS/
http://groups.google.com/group/alt.html
http://groups.google.com/group/comp.infosystems.www.authoring.html
http://groups.google.com/group/comp.infosystems.www.authoring.stylesheets

[div+css-ツール]


Internet Explorer Developer Toolbar, http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en
The W3C Markup Validation Service:, http://validator.w3.org/
マイクロソフト印刷技術-フリーフォント情報,TrueType,OpenType,ClearType:,http://www.microsoft.com/typography/default.mspx
マイクロソフト印刷技術-WEFT 3ページ埋め込みフォント3、http://www.microsoft.com/typography/WEFT.mspx
マイクロソフト印刷技術-WEFT 3-Web埋め込みフォント3-ダウンロードhttp://www.microsoft.com/typography/web/embedding/weft3/download.aspx
マイクロソフト印刷技術-WEFT 3-Web埋め込みフォント3-ウィザードhttp://www.microsoft.com/typography/web/embedding/weft3/wizard.aspx
マイクロソフト印刷技術-WEFT 3ページ埋め込みフォント3-Wizardウィザード-Create font objectsフォントオブジェクトを作成http://www.microsoft.com/typography/web/embedding/weft3/wizard.aspx#create
マイクロソフト印刷技術-WEFT 3ページ埋め込みフォント3-Wizardウィザード-Fonts to embed埋め込みフォントhttp://www.microsoft.com/typography/web/embedding/weft3/wizard.aspx#embed

[div+css-FAQ]

比較div+cssフォーマット、http://validator.w3.org/
div+cssのmargin略語
div+cssのpadding略語
リンク:link,:visited,:hover,:activeの4つのステータス
div+css backgroundRepeatスタイルを使用して背景画像の表示方法を設定し、http://msdn2.microsoft.com/en-us/library/ms530721.aspx
page-break-before印刷分布子の設定
url()インジケータ、http://www.w3.org/TR/CSS21/syndata.html#value-def-uri
!importantルール、http://www.w3.org/TR/CSS21/cascade.html#important-rules
tableに直接入力された文字と他のタグは異なる色を設定します
CSS標準中級リンクのドキュメントhttp://www.w3.org/TR/CSS21/cascade.html#cascade

[div+css-FirefoxとIEブラウザの互換性の問題]

水平中央、Firefoxはmargin-left:autoを使用します.margin-right: auto; IE 6はtext-align:center;
垂直中央、Firefoxでdisplay:table-cell;vertical-align: middle;div垂直中央を実現することができ、IE 6ではIE 6中のcssの特徴によって垂直中央を実現する必要がある.
!importantタグ、Firefoxサポート!importantタグ、IE 6無視!importantタグ、!importantは前に置く必要があります
手型マウスポインタcursor:pointer;
paddingのサイズは、Firefoxではpaddingはwidth以外で計算され、IE 6はwidth内で計算されます
marginのサイズは、IE 6でfloatスタイルの要素を持つmarginのサイズ計算に誤りがあり、paddingと!importantタグ互換性の実現
word-wrapで自動折り曲げを設定し、IEのみ有効
Firefoxで左側のドットが失われます
Internet ExplorerのCSS参考資料http://msdn2.microsoft.com/en-us/library/ms531209.aspx
CSSでcellSpacing属性効果を実現し、border-spacing:10 px;border-spacing: expression(this.cellSpacing=10);
padding-right IE 6でジッタ

[div+css-CSS規格]


Cascading Style Sheets Level 2 Revision 1(CSS 2.1)Specification:カスケードスタイルシート第2段第1回修正(CSS 2.1)仕様、http://www.w3.org/TR/CSS21/
4.3.2 Lengthsの長さ、http://www.w3.org/TR/CSS21/syndata.html#length-units
5.8.3 Class selectors-Classセレクタ-CSS標準ドキュメントhttp://www.w3.org/TR/CSS21/selector.html#class-html
class属性-IEドキュメントhttp://msdn2.microsoft.com/en-us/library/ms533560.aspx
8.3 Margin properties:'margin-top','margin-right','margin-bottom','margin-left',and'margin'-8.3エッジ属性http://www.w3.org/TR/CSS21/box.html#margin-properties
8.5 Border propertiesボーダーのプロパティhttp://www.w3.org/TR/CSS21/box.html#border-properties
9.5 Floatsフローティング、http://www.w3.org/TR/CSS21/visuren.html#floats
background-image背景画像http://www.w3.org/TR/CSS21/colors.html#propdef-background-image
17.6.2 The collapsing border model圧縮枠線モデル、http://www.w3.org/TR/CSS21/tables.html#collapsing-borders
border-collapse圧縮枠-IEドキュメントhttp://msdn2.microsoft.com/en-us/library/ms533513.aspx

[div+css-XHTML規格]


5.6. Table Modules-Tableモジュール、http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#sec_5.6.

[div+css-その他のHTML問題]


OPTGROUPによるSELECTでのOPTIONパケット
Nowrapタグ設定は自動的に折り曲げられず、http://www.w3.org/TR/1998/REC-html40-19980424/struct/tables.html#adef-nowrap
leftmargin設定ページ左余白、topmargin設定ページ上余白
disabledプロパティ、http://msdn2.microsoft.com/en-us/library/ms533732.aspx
About Font Embedding:フォント埋め込みについて、http://msdn2.microsoft.com/en-us/library/ms533034.aspx