CSS 3 で、次のタグ構造を含む HTML ファイルを作成するとします。
<div id="nav-primary"></div>
<div id="content-primary"></div>
<div id="コンテンツセカンダリ"></div>
<div id="tertiary-content"></div>
<div id="nav-secondary"></div>
次に、CSSファイル内で
div[id^="nav"] { 背景:#ff0 }
「 ^ 」に注意してください
この場合、CSS は [u]div#nav-primary と div#nav-secondary[/u] を制御します。これら 2 つのラベルの前に次の文字が付いていることに注意してください。 nav 、「-」で区切られているのか、IDが前から後ろまで一致しているのかが不明です（汗）
div[id$="プライマリ"] { 背景:#ff0 }
「 $ 」であることに注意してください。
この場合、CSS は [u]div#nav-primary と div#content-primary[/u] を制御します。この2つのタグの後にprimarがあることに注意してください。「-」で区切られているのか、IDが後ろから前まで一致しているのかは不明です（汗）。
div[id*="コンテンツ"] {背景:#ff0;
「 * 」であることに注意してください。
この場合の CSS は、[u]div#content-primary div#content-Secondary および div#tertiary-content[/u] を制御します。これらのタグにはすべてコンテンツが含まれていることに注意してください。「-」で区切られているのか、ID が自動的にスキャンされて照合されているのかは不明です (汗)
作者曰く、これらのタグはIE以外の各種ブラウザの最新バージョンでサポートされるようになったそうです、試してみてもいいですが、試しませんよ～（笑）
div#content-primary:target { アウトライン:1px ソリッド #300;
「 :target 」に注意してください。
この場合、CSS はアンカー リンク http://www.example.com/index.html #content-primaryを制御します (アンカー リンクは、一部の Web で見られるリターンと比較して、Web ページ内のリンクとして理解できます)ページ）トップ）
著者は、Mozilla と Safari ブラウザがこれをサポートするようになったと言っています。
input[type="text"]:enabled {background:#ffc;
input[type="text"]:disabled {background:#ddd}
「 [type="text"]:enabled 」 に注意してください。
これはフォームを制御するCSSで、「[u][type="text"][/u]」はフォーム内の型がテキストであることを意味しているようです。 。 。 [u]type="パスワード"[/u]は何になりますか?
input:checked { ボーダー:1px ソリッド #090 }
「 :checked 」に注意してください。
フォームの「選択」を制御するCSSです。 。 。
著者は、Opera と Mozilla ブラウザがこれらをサポートするようになったと言っています。
:root { 背景:#ff0 }
html { 背景:#ff0 }
「 :root 」に注意してください。
この「:root」はhtmlよりも上位のタグで、htmlとbodyを正しく理解するには、市場千鳥さんのこの記事を読んでください。 htmlの外にフレームがあることを発見しました。
著者は、Mozilla と Safari ブラウザがこれをサポートするようになったと言っています。
次の: nth-child() はもっと興味深いです、笑~ 括弧内に数字とデフォルトの文字を入れることができます~
p:nth-child(3) { color:#f00 }
これは、最初に出現したPを基準に、「3」の倍数のPを全て制御するということのようですね～
p:nth-child(奇数) { color:#f00 }
これは、最初に出現したPを基準に、奇数個のPをすべて制御するということのようですね～
p:nth-child(偶数) { color:#f00 }
これは、最初に出現したPを基準に、偶数番目のPをすべて制御するということのようですね～
p:nth-child(3n+0) { color:#f00 }
p:nth-child(3n) { color:#f00 }
この 2 つのタグは同等です。最初のタグの後の 0 は影響を与えません。つまり、最初に出現した P の 3 倍の P が制御されるということです。(すごいですね、ほほ～ [ rolleyes])。 、この「n」は 0.1.2.3.4.5.6....~ の値をとり、計算できる限りの P が制御されます。 。 。
tr:nth-child(2n+11) {背景:#ff0}
上記を理解していれば理解するのは難しくありませんが、彼が制御するラベルが「tr」に変更されるということは、表がより多様になることを意味します。小学校で算数が得意でなければならないと思います。さて、早く家に帰って、もう一度初歩的な算数を勉強してください。 。 。 （しかし、そのようなラベルはコンピュータ処理の効率を向上させますか？[混乱]私のイライラが不要であることを願っています...）
p:last-child {背景:#ff0}
pの前のpが制御される(NND、pが行ったり来たり、ppに当たる[汗])
:not(p) { ボーダー:1px ソリッド #ccc }
この p は制御されていません。これは、独自のスタイルを使用することを意味します。これは、前のスタイルと併用する必要があります。 。 。
p ~ ul {背景:#ff0}
ulがpよりも優先して表示されるのですが、これがどのような優先方法なのかわかりません。 。 。
基本的に、私が理解できるのはこれだけです。間違ったことを言ったら、次の 2 つの Web サイトにアクセスして学習を続けてください。
www.456bereastreet.com/archive/200601/css_3_selectors_explained/
www.w3.org/TR/2005/WD-css3-selectors-20051215/