2

これら 2 つの CSS セレクターの違いは何ですか?

#someId
a#someId

.セレクターのように機能するようです。最初のセレクターは、「 ID を持つ要素を選択する」ことを意味しますsomeID。二つ目はどういう意味ですか？a「 IDで要素を選択する」という意味だと思いますsomeIDか？ページ上に特定の ID を持つ要素が 1 つしか存在できない場合、タグを指定する目的は何ですか? 2 番目のセレクターの特異性は高くなりますか?

4

4 に答える 4

3

はい、2 番目のセレクターの方が特異性が高くなります。

#someIdは単一の ID であり、要素が何であるかに関係なく、その ID を持つ要素を選択します。 要素と ID の両方であり、その ID を持つアンカー要素a#someIdのみを選択するため、より具体的になります。a

特異性を計算し、異なるセレクターの特異性を比較するには、ID、クラス、および X、X、X などの要素をカウントするという一般的なトリックがあります。最も具体的なセレクターは、左端の数字が最も大きいものです (それが同点の場合は、次の数字に移動します)。

#someIdは単なる ID なので、1,0,0 です。

a#someIdは ID であり要素なので、1,0,1 となり、より具体的になります。

ID は常にクラスよりも具体的であり、クラスは常に要素よりも具体的です。特異性を計算する目的で、疑似要素は要素としてカウントされ、疑似クラスはクラスとしてカウントされます。技術的には、256 個の要素 = 1 つのクラス、256 個のクラス = 1 つの ID ですが、セレクター文字列でこれほど多くのことが起こっている場合は、より大きな問題を心配する必要があります。

(複数の ID を含むセレクター文字列を除いて) ID よりも具体的な唯一のものは、要素の属性を!important介して宣言されたスタイルまたはインライン スタイルです。style

CSS の詳細について:

于 2013-11-14T16:04:22.693 に答える
2

その意味は、

aIDを持つ要素を選択するsomeId

はい、より具体的です。

于 2013-11-14T16:04:05.290 に答える
2

#someId

id「someId」を持つ要素を選択します

a#someId

id「someId」でアンカー要素を選択します

1 つ目は、推奨される一意の s を使用しているという前提でのより良いアプローチであり、id実行速度が速いという事実 (CSS は右から左に解決されます)

idこれは、 が含まれている場合に十分に具体的であるという問題ではなく、その場合はidセレクターのみを使用する必要があります。ただし、クラス名またはネストが存在する場合は、より高いレベルの選択により、特定の要素をより正確にターゲットにすることができます。ただし、オーバーキルはアンダーキルと同じくらい悪いことを忘れないでください。バランスがすべてです。

于 2013-11-14T16:05:19.873 に答える
0

2 番目の形式a#someId はやり過ぎです。理論的には、ドキュメント内に同じ ID を持つ要素が 2 つ存在してはならないからです。

私がそれを使用する理由の 1 つは、型を変更するが、何らかの Javascript 操作によって同じ ID を維持する要素がページにあり、その特定の ID に CSS が必要な場合です。

たとえば、いくつかのjQueryで：

 <style>
 p#someId { ....}
 a#someId { ....}
 </style>

 <script>
 $('#someID').replaceWith( '<a id="someId">Now a link</a>');
 </script>
....

<p id='someId'>Not a link</p>
于 2013-11-14T16:07:58.930 に答える