css - 現在選択されている li の CSS を変更する

Question

私はこのメニューを持っています：

<div id="menu-home">
    <ul>
        <li> a </li>
    </ul>
</div>

test.phpテストメニューに対応するページにいるときliは、別のスタイルにする必要があります..

私は試した

#menu-home ul li:active 

しかし、それはうまくいきませんでした..

ありがとう

Answer 1

:active状態はありません<li>

代わりに、PHP でそれを行うことができます。

<div id="menu-home">
<ul>
<li <?php if (page is current page) echo ' class="active"';?>> a </li>
</ul>
</div>

CSS では、次のように指定できます。

#menu-home ul li.active {}

Answer 2

要素は（ステートレスの）箇条書きであることが意図されているため、アクティブな状態は<li>ありません。セレクター:activeはリンクでのみ使用できます。例はここにあります。

ただし、:activeクリックされたときにのみリンクが強調表示されます。その後、設定されているアクションやナビゲーションを実行し、リンクにアクセスします。そこからは、現在表示していない他の既にアクセスしたページと区別することはできず、別のページに移動しても、再び「未アクセス」になることはありません。したがって、これは意図したことを実行しません。

代わりに、CSSにクラスを作成して、.activeすべてのカスタムスタイルを定義できます。次に、ページを生成するPHPは、選択したメニュー項目にクラスを正しく設定する必要があります。つまり、メニューが作成されるたびに、またはのclass="active"いずれかにクラスをアタッチします。<li><a>

（ええ、コードに対するPraveenの答えを見てください^^）