1633

プラス記号（+）は、次の兄弟を選択するためのものです。

前の兄弟に相当するものはありますか？

4

26 に答える 26

959

いいえ、「前の兄弟」セレクターはありません。

関連する注記で~は、は一般的な後継兄弟（要素がこの後に来るが、必ずしも直後ではないことを意味します）用であり、CSS3セレクターです。+次の兄弟用で、CSS2.1です。

セレクターレベル3の隣接する兄弟セレクターおよびカスケードスタイルシートレベル2リビジョン1（CSS 2.1）仕様の5.7隣接する兄弟セレクターを参照してください。

于 2009-11-30T04:08:54.133 に答える
316

~必要に応じて機能する可能性のある以前のすべての兄弟（の反対）をスタイル設定する方法を見つけました。

リンクのリストがあり、1つにカーソルを合わせると、前のリンクがすべて赤に変わるとしましょう。あなたはこのようにそれを行うことができます：

/* default link color is blue */
.parent a {
  color: blue;
}

/* prev siblings should be red */
.parent:hover a {
  color: red;
}
.parent a:hover,
.parent a:hover ~ a {
  color: blue;
}
<div class="parent">
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
</div>

于 2015-01-16T22:45:45.760 に答える
212

セレクターレベル4では:has()、（以前はサブジェクトインジケーター!）が導入され、次のコマンドで前の兄弟を選択できるようになります。

previous:has(+ next) {}

…しかし、執筆時点では、ブラウザのサポートは事実上存在していません。

于 2013-03-19T15:19:46.677 に答える
191

orderフレックスとグリッドレイアウトのプロパティを検討してください。

以下の例ではフレックスボックスに焦点を当てますが、同じ概念がグリッドにも当てはまります。

flexboxを使用すると、以前の兄弟セレクターをシミュレートできます。

特に、flexorderプロパティは、画面上で要素を移動できます。

次に例を示します。

要素Bにカーソルを合わせると、要素Aが赤に変わります。

<ul>
    <li>A</li>
    <li>B</li>
</ul>

手順

  1. フレックスulコンテナを作成します。

    ul { display: flex; }

  1. マークアップの兄弟の順序を逆にします。

    <ul>
   <li>B</li>
   <li>A</li>
</ul>

  1. 兄弟セレクターを使用して、要素Aをターゲットにします（~または+そうします）。

    li:hover + li { background-color: red; }

  1. flexorderプロパティを使用して、ビジュアルディスプレイ上の兄弟の順序を復元します。

    li:last-child { order: -1; }

...そしてvoilà！以前の兄弟セレクターが作成されます（または少なくともシミュレートされます）。

完全なコードは次のとおりです。

ul {
    display: flex;
}

li:hover + li {
    background-color: red;
}

li:last-child {
    order: -1;
}

/* non-essential decorative styles */
li {
    height: 200px;
    width: 200px;
    background-color: aqua;
    margin: 5px;
    list-style-type: none;
    cursor: pointer;
}
<ul>
    <li>B</li>
    <li>A</li>
</ul>

フレックスボックスの仕様から：

5.4。表示順序：orderプロパティ

Flexアイテムは、デフォルトで、ソースドキュメントに表示されるのと同じ順序で表示および配置されます。この orderプロパティを使用して、この順序を変更できます。

プロパティは、orderフレックスアイテムを序数グループに割り当てることにより、フレックスコンテナ内に表示される順序を制御します。<integer>これは、フレックスアイテムが属する序数グループを指定する単一の値を取ります。

すべてのフレックスアイテムの初期order値は0です。

orderCSSグリッドレイアウト仕様も参照してください。

orderflexプロパティで作成された「以前の兄弟セレクター」の例。

.container { display: flex; }

.box5 { order: 1; }    
.box5:hover + .box4 { background-color: orangered; font-size: 1.5em; }

.box6 { order: -4; }
.box7 { order: -3; }
.box8 { order: -2; }
.box9 { order: -1; }
.box9:hover ~ :not(.box12):nth-child(-1n+5) { background-color: orangered;
                                              font-size: 1.5em; }
.box12 { order: 2; }
.box12:hover ~ :nth-last-child(-1n+2) { background-color: orangered;
                                        font-size: 1.5em; }
.box21 { order: 1; }
.box21:hover ~ .box { background-color: orangered; font-size: 1.5em; }

/* non-essential decorative styles */
.container {
    padding: 5px;
    background-color: #888;
}
.box {
    height: 50px;
    width: 75px;
    margin: 5px;
    background-color: lightgreen;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
}
<p>
Using the flex <code>order</code> property to construct a previous sibling selector
</p>

<div class="container">
    <div class="box box1"><span>1</span></div>
    <div class="box box2"><span>2</span></div>
    <div class="box box3"><span>3</span></div>
    <div class="box box5"><span>HOVER ME</span></div>
    <div class="box box4"><span>4</span></div>
</div>

<br>

<div class="container">
    <div class="box box9"><span>HOVER ME</span></div>
    <div class="box box12"><span>HOVER ME</span></div>
    <div class="box box6"><span>6</span></div>
    <div class="box box7"><span>7</span></div>
    <div class="box box8"><span>8</span></div>
    <div class="box box10"><span>10</span></div>
    <div class="box box11"><span>11</span></div>
</div>

<br>

<div class="container">
    <div class="box box21"><span>HOVER ME</span></div>
    <div class="box box13"><span>13</span></div>
    <div class="box box14"><span>14</span></div>
    <div class="box box15"><span>15</span></div>
    <div class="box box16"><span>16</span></div>
    <div class="box box17"><span>17</span></div>
    <div class="box box18"><span>18</span></div>
    <div class="box box19"><span>19</span></div>
    <div class="box box20"><span>20</span></div>
</div>

jsFiddle

補足–CSSに関する2つの時代遅れの信念

Flexboxは、CSSに関する長年の信念を打ち砕いています。

そのような信念の1つは、CSSでは以前の兄弟セレクターは使用できないというものです。

この信念が広まっていると言うのは控えめな表現です。StackOverflowのみに関する関連質問のサンプルを次に示します。

上記のように、この信念は完全に真実ではありません。order以前の兄弟セレクターは、flexプロパティを使用してCSSでシミュレートできます。

z-index神話_

もう1つの長年の信念はz-index、配置された要素でのみ機能するというものです。

実際、仕様の最新バージョンであるW3C Editor's Draftは、これが真実であると主張しています。

9.9.1スタックレベルの指定：z-index プロパティ

z-index

  • 値：自動| | 継承する
  • 初期：自動
  • 適用対象：配置された要素
  • 継承：いいえ
  • パーセンテージ：N / A
  • メディア：ビジュアル
  • 計算値：指定どおり

（強調を追加）

ただし、実際には、この情報は廃止されており、不正確です。

フレックスアイテムまたはグリッドアイテムである要素は、がの場合positionでもスタッキングコンテキストを作成できますstatic。

4.3。フレックスアイテムZ-注文

Flexアイテムは、生のドキュメントの順序の代わりに順序が変更されたドキュメントの順序が使用され、がであってもスタッキングコンテキストを作成する以外の値が使用されることを除いて、インラインブロックとまったく同じように描画されz-indexます。autopositionstatic

5.4。Z軸の順序：z-indexプロパティ

グリッドアイテムのペイント順序は、インラインブロックとまったく同じですが、生のドキュメントの順序の代わりに順序が変更されたドキュメントの順序が使用され、がであってもスタックコンテキストを作成する z-index以外の値が使用されます。autopositionstatic

z-index配置されていないフレックスアイテムでの作業のデモンストレーションは次のとおりです： https ：//jsfiddle.net/m0wddwxs/

于 2016-03-20T18:49:34.063 に答える
71

同じ質問がありましたが、それから「当たり前」の瞬間がありました。書く代わりに

x ~ y

書きます

y ~ x

明らかに、これは「y」ではなく「x」と一致しますが、「一致するものはありますか？」と答えます。質問です。単純なDOMトラバーサルを使用すると、JavaScriptでループするよりも効率的に適切な要素にアクセスできる場合があります。

元の質問はCSSの質問だったので、この回答はおそらく完全に無関係ですが、他のJavascriptユーザーは、私のように検索を介して質問に遭遇する可能性があります。

于 2011-11-30T16:40:40.397 に答える
34

「前のセレクター」はありませんが、:notと~（「セレクターの後」）の組み合わせを使用できます。逆順もJavaScriptもありません。

.parent a{
  color: blue
}

.parent a.active{
  color: red
}

.parent a:not(.parent a.active ~ a){
  color: red
}
<div class="parent">
  <a href="">link</a>
  <a href="">link</a>
  <a href="" class="active">link</a>
  <a href="">link</a>
  <a href="">link</a>
</div>

私のアプローチは、「すべてのdivのスタイルを設定する、後のdivのスタイルを削除する」、javascriptを使用する、または逆の順序を使用するよりも簡単だと思います。

于 2021-05-12T10:24:06.810 に答える
30

+次の兄弟のためです。前の兄弟に相当するものはありますか？

次の2つのaxセレクター!を使用できます。?

従来のCSSには2つの後続の兄弟セレクターがあります。

  • +直後の兄弟セレクターです
  • ~後続の兄弟セレクターです

従来のCSSには、以前の兄弟セレクターはありません。

ただし、ax CSSポストプロセッサライブラリには、以前に2つの兄弟セレクタがあります。

  • ?直前の兄弟セレクター（の反対側+）です
  • !以前の兄弟セレクター（の反対側）~です

実例：

以下の例では：

  • .any-subsequent:hover ~ div後続の任意のを選択しますdiv
  • .immediate-subsequent:hover + div直後を選択しますdiv
  • .any-previous:hover ! div以前の任意のを選択しますdiv
  • .immediate-previous:hover ? div直前を選択しますdiv

div {
  display: inline-block;
  width: 60px;
  height: 100px;
  color: rgb(255, 255, 255);
  background-color: rgb(255, 0, 0);
  text-align: center;
  vertical-align: top;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.6s ease-out;
}

code {
  display: block;
  margin: 4px;
  font-size: 24px;
  line-height: 24px;
  background-color: rgba(0, 0, 0, 0.5);
}

div:nth-of-type(-n+4) {
  background-color: rgb(0, 0, 255);
}

div:nth-of-type(n+3):nth-of-type(-n+6) {
  opacity: 1;
}

.any-subsequent:hover ~ div,
.immediate-subsequent:hover + div,
.any-previous:hover ! div,
.immediate-previous:hover ? div {
  opacity: 1;
}
<h2>Hover over any of the blocks below</h2>

<div></div>
<div></div>

<div class="immediate-previous">Hover for <code>?</code> selector</div>
<div class="any-previous">Hover for <code>!</code> selector</div>
<div class="any-subsequent">Hover for <code>~</code> selector</div>
<div class="immediate-subsequent">Hover for <code>+</code> selector</div>

<div></div>
<div></div>

<script src="https://rouninmedia.github.io/axe/axe.js"></script>

于 2017-04-25T09:59:44.300 に答える
28

2つのトリック。基本的に、HTMLで目的の要素のHTML順序を逆にし、
~ 次の兄弟演算子を使用します。

float-right + HTML要素の順序を逆にします

div{ /* Do with the parent whatever you know just to make the
  inner float-right elements appear where desired */
  display:inline-block;
}
span{
  float:right;  /* float-right the elements! */
}
span:hover ~ span{ /* On hover target it's "previous";) elements */
  background:red;
} 
<div>
  <!-- Reverse the order of inner elements -->
  <span>5</span>
  <span>4</span>
  <span>3</span>
  <span>2</span>
  <span>1</span>
</div>

+の親direction: rtl;は内部要素の順序を逆にします

.inverse{
  direction: rtl;
  display: inline-block; /* inline-block to keep parent at the left of window */
}
span:hover ~ span{ /* On hover target it's "previous";) elements */
  background:gold;
}
Hover one span and see the previous elements being targeted!<br>

<div class="inverse">
  <!-- Reverse the order of inner elements -->
  <span>5</span>
  <span>4</span>
  <span>3</span>
  <span>2</span>
  <span>1</span>
</div>

于 2015-08-19T01:52:00.550 に答える
20

別のフレックスボックスソリューション

HTMLの要素の順序を逆にすることができます。次に、Michael_Bの回答のように使用する以外orderに、レイアウトに応じて使用できflex-direction: row-reverse;ます。flex-direction: column-reverse;

作業サンプル：

.flex {
  display: flex;
  flex-direction: row-reverse;
   /* Align content at the "reversed" end i.e. beginning */
  justify-content: flex-end;
}

/* On hover target its "previous" elements */
.flex-item:hover ~ .flex-item {
  background-color: lime;
}

/* styles just for demo */
.flex-item {
  background-color: orange;
  color: white;
  padding: 20px;
  font-size: 3rem;
  border-radius: 50%;
}
<div class="flex">
  <div class="flex-item">5</div>
  <div class="flex-item">4</div>
  <div class="flex-item">3</div>
  <div class="flex-item">2</div>
  <div class="flex-item">1</div>
</div>

于 2017-01-14T17:33:05.183 に答える
18

現時点ではそれを行う公式の方法はありませんが、これを達成するために少しトリックを使用することができます！これは実験的なものであり、いくつかの制限があることを忘れないでください...（ナビゲーターの互換性が心配な場合は、このリンクを確認してください）

あなたができることはCSS3セレクターを使うことです：呼ばれる疑似クラスnth-child()

#list>* {
  display: inline-block;
  padding: 20px 28px;
  margin-right: 5px;
  border: 1px solid #bbb;
  background: #ddd;
  color: #444;
  margin: 0.4em 0;
}

#list :nth-child(-n+4) {
  color: #600b90;
  border: 1px dashed red;
  background: orange;
}
<p>The oranges elements are the previous sibling li selected using li:nth-child(-n+4)</p>

<div id="list">
  <span>1</span><!-- this will be selected -->
  <p>2</p><!-- this will be selected -->
  <p>3</p><!-- this will be selected -->
  <div>4</div><!-- this will be selected -->
  <div>5</div>
  <p>6</p>
  <p>7</p>
  <p>8</p>
  <p>9</p>
</div>

制限事項

  • 次の要素のクラスに基づいて前の要素を選択することはできません
  • これは疑似クラスでも同じです
于 2014-09-03T16:16:21.227 に答える
9

二重否定を使用できます

SELECTOR:not([SELECTOR]FILTER):not([SELECTOR]FILTER + SELECTOR) { ... }

またはSELECTORのいずれかに置き換えます（使用はおそらく具体的すぎます）。他のもの（私は試しただけです）または（Javascriptを切り替えるための詳細）に置き換えます。TAG.CLASS#IDFILTER:PSUEDO-SELECTOR:hover.CLASS

通常の使用法はおそらくホバリングに依存するため（次の例を参照）

/* Effect only limited when hovering */
TAG.CLASS:not(TAG.CLASS:hover):not(TAG.CLASS:hover + TAG.CLASS) {}
/* Effect only applied when hovering */
PARENT.CLASS:hover > CHILD.CLASS:not(CHILD.CLASS:hover):not(CHILD.CLASS:hover + CHILD.CLASS) {}


/* Solution */
div.parent:hover > div.child:not(:hover):not(:hover ~ .child)  {
    background-color:red;
    border-radius:1.5em;
}
div.parent:hover > div.child:not(:hover):not(:hover ~ .child) > div {
    background-color:yellow;
}

/* Make pretty (kinda) */
div.parent {
  width:9em;
  height:9em;
  /* Layout */
  display:grid;
  grid-template-columns : auto auto auto;
  grid-template-rows : auto auto auto;
}
div.child {
  /* Dimensions */
  height:3em;
  width:3em;
  /* Layout */
  position:relative;
  /* Cursor */
  cursor: pointer;
  /* Presentation */
  border: 1px black solid;
  border-radius:1.5em;
}
.star {
  /* Dimensions */
  width: 2.5em;
  height: 2.5em;
  /* Placement */
  position:absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
  /* Geometry */
  -webkit-clip-path: polygon(
    50% 0%,
    63% 38%,
    100% 38%,
    69% 59%,
    82% 100%,
    50% 75%,
    18% 100%,
    31% 59%,
    0% 38%,
    37% 38%
  );
  clip-path: polygon(
    50% 0%,
    63% 38%,
    100% 38%,
    69% 59%,
    82% 100%,
    50% 75%,
    18% 100%,
    31% 59%,
    0% 38%,
    37% 38%
  );
  /* Presentation */
  background-color: lightgrey;
}
div.child:hover {
    /* Presentation */
    background-color:yellow;
    border-radius:1.5em;
}
div.child:hover > div.star {
    /* Presentation */
    background-color:red;
}
<div class="parent">
  <div class="child" href="#"><div class="star"></div></div>
  <div class="child" href="#"><div class="star"></div></div>
  <div class="child" href="#"><div class="star"></div></div>
  <div class="child" href="#"><div class="star"></div></div>
  <div class="child" href="#"><div class="star"></div></div>
  <div class="child" href="#"><div class="star"></div></div>
  <div class="child" href="#"><div class="star"></div></div>
  <div class="child" href="#"><div class="star"></div></div>
  <div class="child" href="#"><div class="star"></div></div>
 </div>

于 2021-02-03T08:17:18.570 に答える
6

いいえ。CSSではできません。それは「カスケード」を心に留めます;-)。

ただし、 JavaScriptをページに追加できる場合は、 jQueryを少し使用するだけで最終目標を達成できます。
jQueryを使用findして、ターゲット要素/クラス/ IDに対して「先読み」を実行してから、バックトラックしてターゲットを選択できます。
次に、jQueryを使用して、要素のDOM（CSS）を書き直します。

Mike Brantによるこの回答に基づいて、次のjQueryスニペットが役立つ可能性があります。

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

<ul>これにより、最初に。の直後に続くすべてのが選択されます<p>。次に、そのセットから
前のすべてのを選択するために「バックトラック」します。<p><ul>

事実上、「前の兄弟」はjQueryを介して選択されています。
次に、関数を使用して.css、その要素のCSSの新しい値を渡します。

私の場合、IDがのDIVを選択する方法を探して#full-widthいましたが、クラスが。の（間接的な）子孫DIVがある場合に限り.companiesます。

の下のすべてのHTMLを制御.companiesできましたが、その上のHTMLを変更することはできませんでした。
そして、カスケードは一方向にのみ進みます：下向き。

したがって、すべてを選択できます#full-width。
または、に.companies続くものだけを選択することもできます#full-width。
しかし、私は進んだsだけを選択することはできませんでした。#full-width .companies

.companiesまた、 HTMLの上位に追加することもできませんでした。HTMLのその部分は外部で記述され、コードをラップしました。

しかし、jQueryを使用すると、必要なを選択して#full-width、適切なスタイルを割り当てる ことができます。

$("#full-width").find(".companies").parents("#full-width").css( "width", "300px" );

これは、CSSの標準でセレクターを使用して特定の要素をターゲットにする方法と同様に、すべてを検索し#full-width .companies、それらだけを選択します。 次に、を使用して「バックトラック」し、のすべての親を選択しますが、 これらの結果をフィルタリングして要素のみを保持するため、最終的には、クラスの子孫がある場合に のみ要素を選択します。最後に、結果の要素に新しいCSS（）値を 割り当てます。.companies
.parents.companies
#fill-width
#full-width.companies
width

$(".parent").find(".change-parent").parents(".parent").css( "background-color", "darkred");
div {
  background-color: lightblue;
  width: 120px;
  height: 40px;
  border: 1px solid gray;
  padding: 5px;
}
.wrapper {
  background-color: blue;
  width: 250px;
  height: 165px;
}
.parent {
  background-color: green;
  width: 200px;
  height: 70px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<div class="wrapper">

  <div class="parent">
    "parent" turns red
    <div class="change-parent">
    descendant: "change-parent"
    </div>
  </div>
  
  <div class="parent">
    "parent" stays green
    <div class="nope">
    descendant: "nope"
    </div>
  </div>
  
</div>
Target <b>"<span style="color:darkgreen">parent</span>"</b> to turn <span style="color:red">red</span>.<br>
<b>Only</b> if it <b>has</b> a descendant of "change-parent".<br>
<br>
(reverse cascade, look ahead, parent un-descendant)
</html>

jQueryリファレンスドキュメント：
$（）またはjQuery（）：DOM要素。
。find：セレクター、jQueryオブジェクト、または要素によってフィルター処理された、一致した要素の現在のセット内の各要素の子孫を取得します。
。親：一致した要素のセット内の各要素の直前の兄弟を取得します。セレクターが指定されている場合、そのセレクターと一致する場合にのみ前の兄弟を取得します（リストされた要素/セレクターのみを含むように結果をフィルター処理します）。
。css：一致した要素のセットに1つ以上のCSSプロパティを設定します。

于 2019-05-09T07:45:02.483 に答える
5

正確な位置がわかっている場合は、:nth-child()後続のすべての兄弟をベースに除外すると機能します。

ul li:not(:nth-child(n+3))

これは、3番目より前のすべてを選択しますli（たとえば、1番目と2番目）。しかし、私の意見では、これは醜く見え、非常にタイトなユースケースを持っています。

n番目の子を右から左に選択することもできます。

ul li:nth-child(-n+2)

これは同じことをします。

于 2014-08-29T15:27:40.677 に答える
5

ホバーで次の兄弟のスタイルをオーバーライドして、前の兄弟だけがホバーでスタイルを追加したように見せます。

ul li {
  color: red;
}

ul:hover li {
  color: blue;
}

ul:hover li:hover ~ li{
  color: red;
}
<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>

于 2020-10-12T07:44:24.417 に答える
3

正確な目的に応じて、親セレクターを使用せずに（存在する場合でも）親セレクターの有用性を実現する方法があります...

私たちが持っていると言う：

<div>
  <ul>
    <li><a>Pants</a></li>
    <li><a>Socks</a></li>
    <ul>
      <li><a>White socks</a></li>
      <li><a>Blue socks</a></li>
    </ul>
  </ul>
</div>

靴下ブロック（靴下の色を含む）を間隔を使用して視覚的に目立たせるにはどうすればよいですか？

何がいいのに存在しないのか：

ul li ul:parent {
  margin-top: 15px;
  margin-bottom: 15px;
}

何が存在しますか：

li > a {
  margin-top: 15px;
  display: block;
}
li > a:only-child {
  margin-top: 0px;
}

これにより、すべてのアンカーリンクの上部に15pxのマージンが設定され、LI内にUL要素（または他のタグ）がない場合は0にリセットされます。

于 2014-02-07T16:13:58.873 に答える
3 

/* Add a style to all the children, then undo the style to the target 
and sibling children of your target. */

ul>li {
  color: red;
}

ul>li.target,
ul>li.target~li {
  color: inherit;
}
<ul>
  <li>before</li>
  <li class="target">target</li>
  <li>after</li>
  <li>after</li>
</ul>

于 2020-12-02T22:38:12.037 に答える
2

残念ながら、「以前の」兄弟セレクターはありませんが、ポジショニング（たとえば、右にフロート）を使用することで同じ効果を得ることができる可能性があります。それはあなたが何をしようとしているのかによります。

私の場合、主にCSSの5つ星評価システムが必要でした。以前の星に色を付ける（またはアイコンを入れ替える）必要があります。各要素を正しくフローティングすることで、基本的に同じ効果が得られます（したがって、星のhtmlは「逆方向」に記述する必要があります）。

この例ではFontAwesomeを使用しており、fa-star-oとfa-starのユニコードを入れ替えています http://fortawesome.github.io/Font-Awesome/

CSS：

.fa {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* set all stars to 'empty star' */
.stars-container {
    display: inline-block;      
}   

/* set all stars to 'empty star' */
.stars-container .star {
    float: right;
    display: inline-block;
    padding: 2px;
    color: orange;
    cursor: pointer;

}

.stars-container .star:before {
    content: "\f006"; /* fontAwesome empty star code */
}

/* set hovered star to 'filled star' */
.star:hover:before{
    content: "\f005"; /* fontAwesome filled star code */
}

/* set all stars after hovered to'filled star' 
** it will appear that it selects all after due to positioning */
.star:hover ~ .star:before {
    content: "\f005"; /* fontAwesome filled star code */
}

HTML：（40）

JSFiddle： http: //jsfiddle.net/andrewleyva/88j0105g/

于 2014-08-12T19:39:48.540 に答える
2

以前の兄弟trを選択するためのソリューションが必要でした。私はReactとStyled-componentsを使用してこのソリューションを思いついた。これは私の正確な解決策ではありません（これは数時間後のメモリからのものです）。setHighlighterRow関数に欠陥があることは知っています。

OnMouseOver行は、行インデックスを状態に設定し、前の行を新しい背景色で再レンダリングします

class ReactClass extends Component {
  constructor() {
    this.state = {
       highlightRowIndex: null
    }
  }

  setHighlightedRow = (index) => {
    const highlightRowIndex = index === null ? null : index - 1;
    this.setState({highlightRowIndex});
  }

  render() {
    return (
       <Table>
        <Tbody>
           {arr.map((row, index) => {
                const isHighlighted = index === this.state.highlightRowIndex
                return {
                    <Trow 
                        isHighlighted={isHighlighted}
                        onMouseOver={() => this.setHighlightedRow(index)}
                        onMouseOut={() => this.setHighlightedRow(null)}
                        >
                        ...
                    </Trow>
                }
           })}  
        </Tbody>   
       </Table>
    )
  }
}

const Trow = styled.tr`
    & td {
        background-color: ${p => p.isHighlighted ? 'red' : 'white'};
    }

    &:hover {
        background-color: red;
    }
`;
于 2019-06-10T01:55:53.007 に答える
2

ありません、あります。

入力の前にラベルを配置する必要がある場合は、入力の後にラベルを配置し、ラベルと入力の両方をdiv内に保持し、次のようにdivのスタイルを設定します。

.input-box {
  display: flex;
  flex-direction: column-reverse;
}
<div class="input-box">
  <input
   id="email"
   class="form-item"           
   />

   <label for="email" class="form-item-header">                  
   E-Mail*                  
   </label>
</div>

これで、cssで使用可能な標準の次の兄弟スタイリングオプションを適用でき、前の兄弟スタイリングを使用しているように見えます。

于 2020-06-05T16:25:53.777 に答える
2

そのようなセレクターはありませんが、DOMAPIにはかなり読み取り専用のプロパティがあります

Node.previousSibling

于 2021-03-25T17:28:50.573 に答える
2

私は最も簡単な解決策を見つけました。それはあなたがしていることに基づいてのみ適用されるかもしれません。

次の例で、「sibling_2」にカーソルを合わせて「sibling_1」を変更するとします。

<div class='parent'>
  <div class='sibling_1'></div>
  <div class='sibling_2'></div>
</div>

以前の要素セレクターがないため、「sibling_1」と「sibling_2」を切り替えて適用するだけで、同じように見えます。

.parent {
  display: flex;
  flex-direction: row-reverse;
}

今、あなたはそのようにそれらを選択することができます。 

.sibling_1:hover ~ .sibling_2 {
  #your CSS
}

于 2021-09-07T09:21:02.403 に答える
1

私も同様の問題を抱えていましたが、この性質のすべての問題は次のように解決できることがわかりました。

  1. すべてのアイテムにスタイルを与えます。
  2. 選択したアイテムにスタイルを付けます。
  3. +または〜を使用して次のアイテムにスタイルを付けます。

このようにして、現在の前のアイテム（現在のアイテムと次のアイテムで上書きされるすべてのアイテム）と次のアイテムのスタイルを設定できます。

例：

/* all items (will be styled as previous) */
li {
  color: blue;
}

/* the item i want to distinguish */
li.milk {
  color: red;
}

/* next items */
li ~ li  {
  color: green;
}


<ul>
  <li>Tea</li>
  <li class="milk">Milk</li>
  <li>Juice</li>
  <li>others</li>
</ul>

それが誰かを助けることを願っています。

于 2018-02-23T16:38:00.497 に答える
1

ここに同様の質問へのリンクがあります

CSSは、星の評価のために以前のすべての兄弟を選択します

だから私はみんなの反応のビットを使って私の解決策を投稿します、そして誰でもそれを参照として使うことができ、そしておそらく改善を勧めます。

// Just to check input value
// Consts
const starRadios = document.querySelectorAll('input[name="rating"]');

// EventListeners
starRadios.forEach((radio) => radio.addEventListener('change', getStarRadioValue));

// Get star radio value
function getStarRadioValue(event) { 
    alert(event.target.value) 
    // Do something with it
};
.star-rating {
  font-size: 1.5rem;
  unicode-bidi: bidi-override;
  direction: rtl;
  text-align: left;
}
.star-rating.editable label:hover {
  cursor: pointer;
}
.star-rating.editable .icon-star:hover,
.star-rating.editable .icon-star:hover ~ .icon-star {
  background-color: #fb2727 !important;
}

.icon-star {
  position: relative;
  background-color: #72747d;
  width: 32px;
  height: 32px;
  display: inline-block;
  transition: background-color 0.3s ease;
}
.icon-star.filled {
  background-color: #fb2727;
}

.icon-star > label {
  display: inline-block;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: absolute;
}

.icon-star > label > input[type="radio"] {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(50%) translateX(50%);
  display: none;
}
<div class="star-rating editable">
  <span class="icon-star">
    <label>
      <input type="radio" name="rating"  value="5" />
    </label>
  </span>
  <span class="icon-star">
    <label>
      <input type="radio" name="rating" value="4" />
    </label>
  </span>
  <span class="icon-star">
    <label>
      <input type="radio" name="rating" value="3" />
    </label>
  </span>
  <span class="icon-star">
    <label>
      <input type="radio" name="rating" value="2" />
    </label>
  </span>
  <span class="icon-star">
    <label>
      <input type="radio" name="rating"  value="1" />
    </label>
  </span>
</div>

于 2020-09-17T19:23:33.030 に答える
1

私のユースケースでは、フォーカスの前の要素スタイルを変更し、親要素に2つのアイテムのみをホバーする必要がありました。そうするために使用され:focus-within、:hover疑似クラス。

フォーカス/ホバーイベントが発生するたびに選択するように

.root-element:hover .element-to-style { background-color: red;} 
.root-element:focus-within .element-to-style { background-color: green;} 
<div class="root-element">
<span class="element-to-style"> TextFocused</span>
<input type="text" placeholder="type To Style"/>

</div>

于 2021-10-21T19:50:07.170 に答える
0

これと同じ問題が発生しました。入力フォーカスで追加アイコンの塗りつぶしの色を変更しようとしたときに、コードは次のようになりました。

<template #append>
    <b-input-group-text><strong class="text-danger">!</strong></b-input-group-text>
</template>
<b-form-input id="password_confirmation" v-model="form.password_confirmation" type="password" placeholder="Repeat password" autocomplete="new-password" />

問題は、vue-bootstrap スロットを使用してプリペンドを挿入しているため、場所を変更しても、入力後にレンダリングされることでした。

私の解決策は、cssが以前の兄弟をサポートしていないため、それらの場所をスワイプし、カスタムの先頭に追加して〜記号を使用することでした。

<div class="form-input-prepend">
    <svg-vue icon="common.lock" />
</div>
<b-form-input id="password_confirmation" v-model="form.password_confirmation" type="password" placeholder="Repeat password" autocomplete="new-password" />

Scssスタイル

.form-control:focus ~ .form-input-prepend {
    svg path {
        fill: $accent;
    }
}

したがって、その位置を変更してみてください。必要に応じて、cssの順序または位置を使用してください。あなたが望むものを達成するために、そしてこの種のニーズのためにjavascriptを使用することを避けるために。

于 2021-01-13T21:25:08.187 に答える
-2

この問題を修正するには、要素をフレックスボックスに入れてから、flex-direction：flex-reverseを使用します。

次に、HTMLの要素を手動で反転する（逆の順序で配置する）必要がありましたが、正常に見え、機能しました。

<div style="display: flex; flex-direction: flex-reverse">
  <a class="element2">Element 2</a>
  <a class="element1">Element 1</a>
</div>
...
<style>
  .element2:hover + element1 {
    ...
  }
</style>
于 2021-09-23T12:08:14.300 に答える