<h2 id="%E6%AC%8A%E9%87%8D">
<a class="header-anchor-link" href="#%E6%AC%8A%E9%87%8D" aria-hidden="true"></a> 權重</h2>
<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<pre><code>!important &gt; inline style &gt; ID &gt; class / 屬性選擇器 &gt; Tag &gt; *
</code></pre>
</div></aside>
<div class="code-block-container"><pre class="language-markdown"><code class="language-markdown">!important ← 10000分
&lt;div style="color=#333;&gt; ← inline style 1000分
ID ← 100分
class ←10分
HTML tag ←1分
</code></pre></div><hr>
<h3 id="%3Ahover">
<a class="header-anchor-link" href="#%3Ahover" aria-hidden="true"></a> :hover</h3>
<h3 id="%3Aactive">
<a class="header-anchor-link" href="#%3Aactive" aria-hidden="true"></a> :active</h3>
<h3 id="%3Alink">
<a class="header-anchor-link" href="#%3Alink" aria-hidden="true"></a> :link</h3>
<h3 id="%3Avisted">
<a class="header-anchor-link" href="#%3Avisted" aria-hidden="true"></a> :visted</h3>
<h3 id="%3Abefore-%3Aafter">
<a class="header-anchor-link" href="#%3Abefore-%3Aafter" aria-hidden="true"></a> :before :after</h3>
<h3 id="%3Anot(%23container)">
<a class="header-anchor-link" href="#%3Anot(%23container)" aria-hidden="true"></a> :not(#container)</h3>
<h3 id="%3A%3Afirst-letter%2F%3A%3Afirst-line">
<a class="header-anchor-link" href="#%3A%3Afirst-letter%2F%3A%3Afirst-line" aria-hidden="true"></a> ::first-letter/::first-line</h3>
<h3 id="%3Anth-child(even)%7B%7D">
<a class="header-anchor-link" href="#%3Anth-child(even)%7B%7D" aria-hidden="true"></a> :nth-child(even){}</h3>
<p><code>li:nth-child(3)</code></p>
<h3 id="%3Anth-last-child(n)">
<a class="header-anchor-link" href="#%3Anth-last-child(n)" aria-hidden="true"></a> :nth-last-child(n)</h3>
<h3 id="%3Anth-of-type(n)">
<a class="header-anchor-link" href="#%3Anth-of-type(n)" aria-hidden="true"></a> :nth-of-type(n)</h3>
<h3 id="%3Afirst-child%7B%7D">
<a class="header-anchor-link" href="#%3Afirst-child%7B%7D" aria-hidden="true"></a> :first-child{}</h3>
<h3 id="%3Alast-child%7B%7D">
<a class="header-anchor-link" href="#%3Alast-child%7B%7D" aria-hidden="true"></a> :last-child{}</h3>
<p><code>ul&gt;li:last-child{}</code></p>
<h3 id="li-%2B-li">
<a class="header-anchor-link" href="#li-%2B-li" aria-hidden="true"></a> li + li</h3>
<h3 id="ul-%3E-li">
<a class="header-anchor-link" href="#ul-%3E-li" aria-hidden="true"></a> ul &gt; li</h3>
<h3 id="li-~-a">
<a class="header-anchor-link" href="#li-~-a" aria-hidden="true"></a> li ~ a</h3>
<h3 id="%3Achecked">
<a class="header-anchor-link" href="#%3Achecked" aria-hidden="true"></a> :checked</h3>


CSS選取器

權重

:hover

:active

:link

:visted

:before :after

:not(#container)

::first-letter/::first-line

:nth-child(even){}

:nth-last-child(n)

:nth-of-type(n)

:first-child{}

:last-child{}

li + li

ul > li

li ~ a

:checked

Discussion