[CSS3] モバイル Web 開発シリーズ CSS3 強化版 Selector_html/css_WEB-ITnose

css3 は、モバイル Web 開発の主要なテクノロジーの 1 つです。現在、モバイル Web 開発での使用に最適な CSS3 テクノロジーの機能には、強化されたセレクター、シャドウ、強力な背景設定

、丸い境界線

が含まれます。 次に、主に 2 つに分けられる強化されたセレクターについて説明します。タイプ、属性セレクター、疑似クラス セレクター

1. 属性セレクター

1.1 完全一致セレクター

構文: [attribute=value]

<span style="font-family:Microsoft YaHei;"><div id="article">属性匹配选择器</div><style type="text/css">[id=article]{	color:red;}</style></span>

1.2 一致するセレクター

が含まれます。構文: [属性* =値]

<span style="font-family:Microsoft YaHei;"><div id="article">属性匹配选择器</div><div id="subarticle">属性匹配选择器</div><div id="article1">属性匹配选择器</div><style type="text/css">[id*=article]{	color:red;}</style></span>

1.3 最初の文字マッチングセレクター

構文: [attribute^=value]

<span style="font-family:Microsoft YaHei;"><div id="article">属性匹配选择器</div><div id="subarticle">属性匹配选择器</div><div id="article1">属性匹配选择器</div><style type="text/css">[id^=article]{	color:red;}</style></span>

1.4 最後の文字マッチングセレクター

Syntax: [attribute$=value]

<span style="font-family:Microsoft YaHei;"><div id="article">属性匹配选择器</div><div id="subarticle">属性匹配选择器</div><div id="article1">属性匹配选择器</div><style type="text/css">[id$=article]{	color:red;}</style></span>

2. 疑似-クラスセレクター

CSS3 セレクターには、ハイパーリンクの 4 つの状態セレクター

a:visited、などの疑似クラスセレクターが既に存在していました。 a:hover、a:active

CSS3 は、以下を含む多くのセレクターを追加します:

最初の行の擬似要素セレクター

最初の文字の擬似要素セレクター

ルートセレクター

notセレクター

空のセレクター

ターゲットセレクター