10

CSS と次の例を使用して、後に続く のみを選択する方法はあります<p>か<ul>?

そうでない場合、jQuery セレクターは何ifですか?それともステートメントが必要ですか?

<p>Hello there.</p>

<p>Select this para!</p>
<ul>
    <li>list item</li>
</ul>

<ul>
    <li>don't select this list! :)</li>
</ul>

<p>And don't select this paragraph! :)</p>
4

6 に答える 6

14

CSS3 では不可能です。できることは、次のいずれかのみを選択すること<ul>です<p>。

p + ul { /*...*/ }

ただし、ブラウザーがCSS4 subject operatorの実装を開始すると、可能になります。

!p + ul { /*...*/ }

それまでは、jQuery を使用して DOM をさかのぼる必要があります。

于 2013-01-22T23:29:36.260 に答える
6

いいえ、実際には CSS はこれで役に立ちません。

必要なのは、存在しない以前の兄弟セレクターです。

これも見てください: 「前の兄弟」CSSセレクターはありますか?

于 2013-01-22T23:23:16.113 に答える
6

残念ながら、javascript に切り替える必要があります。必要なものに最も近い CSS セレクター (隣接する兄弟セレクター) は、必要なものとは正反対のことを行います。たとえば、次<ul>の<p>ようにすべてを選択できます。

p + ul { //style }

ただし、次のように jQuery でこの選択を行うことができます。

$('p + ul').prev('p')

<ul>したがって、最初に直後のすべて<p>を選択してから、それらから前のものを選択<p>します。

于 2013-01-22T23:29:52.307 に答える
2

http://api.jquery.com/prev/

このようなものはあなたのために働くでしょうか？P にクラスを追加する必要があるかもしれません。

ただし、Ulsの前に選択されたすべてのクラスの要素を選択できるようにする必要があります

例：

<p class="selected">my p</p>
<ul>My ul</ul>
<script>$("ul").prev(".selected").css("background", "yellow");</script>
</body>
于 2013-01-22T23:28:28.900 に答える