mootools - Slick (mootools) セレクターエンジンのドキュメント

Question

Mootools の洗練されたセレクターエンジンのドキュメントは、まばらで友好的ではないようです。

例：

通常、次の方法で要素の最後の子に到達できます。

$('wrapper').getLast().setStyle('background-color','green');

新しい滑らかなエンジンを利用して同じことを達成するにはどうすればよいですか? ドキュメントはどこにありますか？

CSS3セレクターを学ぶべきですか？

彼らの例では、$$('p.foo !^') を使用して、p クラス foo の最後の子を取得します。(それらは $$ 配列内の p.foo の最後のインスタンスまたは最後の要素の最後の子を意味しますか???)

ここで少しいじってみましたが、最後の2つは機能しません:

score 3 · Accepted Answer

以下の例では、要素の最後の子をで選択しますid="wrapper。1 つの要素のみを返します。

$$('#wrapper !^').setStyle('background-color','red');

または、より高速であるため、必要な要素が1つだけであるため、より良い方法:

document.getElement('#wrapper !^').setStyle('background-color','red');

ただし、このように記述されている場合、ページ上のすべての p 要素の最後の子を選択します。class="wrapper"

$$('p.wrapper !^').setStyle('background-color','red');

これを行う別の方法は次のとおりですが、次の例の方が高速です。

('someId').getLast().setStyle('background-color','red');

Dimitar が指摘したように、これはより良い (より高速な) 方法です。

document.getElement('#someId :last-child')

あなたのフィドルに関しては、最後の2つのセレクターは次のように書く必要があります:

$$('#wrapper :last-child').setStyle('background-color','red');
$$('#wrapper !^').setStyle('background-color','red');

「wrapper」と「:last-child」の間のスペースに注意してください。これは、「wrapper」の子要素の最後の子を選択しているためです。

mootools - Slick (mootools) セレクター エンジンのドキュメント