เครื่องหมายบวก ( +) สำหรับพี่น้องคนต่อไป

มีเทียบเท่าสำหรับพี่น้องก่อนหน้า?

ไม่ไม่มีตัวเลือก "พี่น้องก่อนหน้า"

ในบันทึกย่อที่เกี่ยวข้องนั้น~มีไว้สำหรับพี่น้องผู้สืบทอดทั่วไป (หมายถึงองค์ประกอบที่มาหลังจากสิ่งนี้ แต่ไม่จำเป็นทันทีหลังจากนั้น) และเป็นตัวเลือก CSS3 +สำหรับพี่น้องคนต่อไปและเป็น CSS2.1

ดูCombinator พี่น้องที่อยู่ติดกันจากSelectors ระดับที่ 3และ5.7 เตอร์พี่น้องที่อยู่ติดกันจากการ Cascading Style Sheets Level 2 Revision 1 (CSS 2.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>

Selectors ระดับ 4 แนะนำ:has() (ก่อนหน้านี้ตัวบ่งชี้เรื่อง!) ซึ่งจะช่วยให้คุณเลือกพี่น้องก่อนหน้าด้วย:

previous:has(+ next) {}

... แต่ในขณะที่เขียนมันเป็นระยะทางไกลเกินกว่าขอบตกเลือดเพื่อรองรับเบราว์เซอร์

พิจารณาorderคุณสมบัติของโครงร่างแบบยืดหยุ่นและกริด

ฉันจะมุ่งเน้นไปที่ flexbox ในตัวอย่างด้านล่าง แต่แนวคิดเดียวกันนี้ใช้กับกริด

ด้วย flexbox ตัวเลือกพี่น้องก่อนหน้านี้สามารถจำลองได้

โดยเฉพาะorderคุณสมบัติยืดหยุ่นสามารถย้ายองค์ประกอบไปรอบ ๆ หน้าจอ

นี่คือตัวอย่าง:

คุณต้องการให้องค์ประกอบ A เปลี่ยนเป็นสีแดงเมื่อองค์ประกอบ B ถูกโฮเวอร์

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

ขั้นตอน

1. ทำulภาชนะบรรจุแบบยืดหยุ่น
   
   

   ul { display: flex; }

2. กลับคำสั่งของพี่น้องในเครื่องหมาย
   
   

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

3. ใช้ตัวเลือกพี่น้องเพื่อกำหนดเป้าหมายองค์ประกอบ A ( ~หรือ+จะทำ)
   
   

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

4. ใช้orderคุณสมบัติflex เพื่อเรียกคืนลำดับของพี่น้องบนหน้าจอแสดงผล
   
   

   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>

จากข้อมูลจำเพาะของ flexbox:

5.4 แสดงลำดับ: orderคุณสมบัติ

โดยปกติแล้วรายการ Flex จะแสดงและจัดวางตามลำดับเดียวกับที่ปรากฏในเอกสารต้นฉบับ orderคุณสมบัติสามารถใช้ในการเปลี่ยนการสั่งซื้อนี้

orderควบคุมคุณสมบัติลำดับที่รายการดิ้นปรากฏภายในภาชนะดิ้นโดยการกำหนดให้พวกเขากลุ่มลำดับ ใช้<integer>ค่าเดียวซึ่งระบุกลุ่มลำดับที่รายการ flex อยู่

orderค่าเริ่มต้นสำหรับรายการ flex ทั้งหมดคือ 0

ยังเห็นorderในตาราง CSS เค้าโครงข้อมูลจำเพาะ

ตัวอย่างของ "selector sibling selectors ก่อนหน้า" ที่สร้างขึ้นด้วยorderคุณสมบัติflex

.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

A Side Note - ความเชื่อที่ล้าสมัยสองเรื่องเกี่ยวกับ CSS

Flexbox กำลังสลายความเชื่อที่มีมานานเกี่ยวกับ CSS

หนึ่งความเชื่อดังกล่าวคือตัวเลือกพี่น้องก่อนหน้านี้เป็นไปไม่ได้ใน CSS

ที่จะบอกว่าความเชื่อนี้เป็นที่แพร่หลายจะเป็นการพูดน้อย นี่คือตัวอย่างของคำถามที่เกี่ยวข้องกับ Stack Overflow เพียงอย่างเดียว:

• เลือกพี่น้องก่อนหน้าขององค์ประกอบใน CSS โดยใช้ตัวเลือก
• CSS: เลือกพี่น้องก่อนหน้า
• CSS เลือกพี่น้องก่อนหน้า
• ตัวเลือกที่อยู่ติดกันก่อนหน้าใน CSS
• เลือกพี่น้องก่อนหน้านี้เมื่อโฮเวอร์
• CSS selector เพื่อรับความเป็นพี่น้องก่อนหน้า
• เปลี่ยนสีขององค์ประกอบพี่น้องในโฮเวอร์โดยใช้ CSS
• วิธีเลือก sibling ก่อนหน้าโดยใช้ selenium css syntax
• CSS Selector สำหรับการเลือกองค์ประกอบที่มาก่อนองค์ประกอบอื่นหรือไม่
• วิธีเพิ่มสไตล์ให้กับพี่น้องก่อนหน้าของอินพุตที่แอ็คทีฟโดยใช้ CSS เท่านั้น
• ตัวเลือก CSS สำหรับองค์ประกอบถัดไปและก่อนหน้า
• วิธีส่งผลกระทบต่อองค์ประกอบอื่น ๆ เมื่อมีการวางตัว div

ตามที่อธิบายไว้ข้างต้นความเชื่อนี้ไม่เป็นความจริงทั้งหมด ตัวเลือกพี่น้องก่อนหน้านี้สามารถจำลองใน CSS โดยใช้orderคุณสมบัติflex

z-indexตำนาน

ความเชื่อที่มีมานานแล้วอีกอย่างหนึ่งก็คือมันใช้งานได้z-indexกับองค์ประกอบที่วางตำแหน่ง

ในความเป็นจริงเวอร์ชันล่าสุดของสเป็ค - ร่างของ W3C Editor - ยังคงยืนยันสิ่งนี้เป็นจริง:

9.9.1 การระบุระดับสแต็ก: z-index คุณสมบัติ

z-index

• ค่า: อัตโนมัติ | | สืบทอด
• เริ่มต้น: อัตโนมัติ
• ใช้กับ: องค์ประกอบตำแหน่ง
• สืบทอดมา: ไม่
• เปอร์เซ็นต์: N / A
• สื่อ: ภาพ
• ค่าที่คำนวณได้: ตามที่ระบุ

_{(เน้นเพิ่ม)}

อย่างไรก็ตามในความเป็นจริงข้อมูลนี้ล้าสมัยและไม่ถูกต้อง

องค์ประกอบที่เป็นรายการดิ้นหรือรายการตารางสามารถสร้างบริบทซ้อนแม้ในขณะที่เป็นpositionstatic

4.3 Flex Item Z- การสั่งซื้อ

รายการ Flex สีเหมือนกับบล็อกแบบอินไลน์ยกเว้นการสั่งซื้อเอกสารที่สั่งการแก้ไขถูกนำมาใช้ในสถานที่ของการสั่งซื้อเอกสารดิบและz-indexค่าอื่น ๆ กว่าautoสร้างบริบทซ้อนแม้ว่ามีpositionstatic

5.4 การสั่งซื้อแกน Z: z-indexคุณสมบัติ

การสั่งซื้อภาพวาดของรายการตารางเป็นเหมือนกับบล็อกแบบอินไลน์ยกเว้นการสั่งซื้อเอกสารเพื่อแก้ไขที่ใช้ในสถานที่ของการสั่งซื้อเอกสารดิบและz-indexค่าอื่น ๆ กว่าautoสร้างบริบทซ้อนแม้ว่า มีpositionstatic

นี่คือตัวอย่างของz-indexการทำงานกับไอเท็มเฟล็กซ์ที่ไม่มีตำแหน่ง: https://jsfiddle.net/m0wddwxs/

ฉันมีคำถามเดียวกัน แต่แล้วฉันก็มีช่วงเวลา "duh" แทนที่จะเขียน

x ~ y

เขียน

y ~ x

เห็นได้ชัดว่าการจับคู่นี้ "x" แทนที่จะเป็น "y" แต่มันตอบว่า "มีการแข่งขันหรือไม่?" คำถามและการสำรวจเส้นทาง DOM อย่างง่ายอาจนำคุณไปยังองค์ประกอบที่เหมาะสมมีประสิทธิภาพมากกว่าการวนซ้ำใน javascript

ฉันรู้ว่าคำถามเดิมเป็นคำถาม CSS ดังนั้นคำตอบนี้อาจไม่เกี่ยวข้องอย่างสมบูรณ์ แต่ผู้ใช้ Javascript รายอื่นอาจสะดุดกับคำถามผ่านทางการค้นหาอย่างที่ฉันทำ

สองเทคนิค โดยทั่วไปการกลับคำสั่ง 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>

+สำหรับพี่น้องคนต่อไป มีเทียบเท่าสำหรับพี่น้องก่อนหน้า?

คุณสามารถใช้ตัวเลือกขวานสองตัว: !และ?

มี2ตัวเลือกพี่น้องที่ตามมาใน CSS ธรรมดา:

• +เป็นตัวเลือกพี่น้องที่ตามมาทันที
• ~เป็นตัวเลือกพี่น้องใด ๆ ที่ตามมา

ใน CSS ธรรมดามีไม่มีตัวเลือกพี่น้องก่อนหน้านี้

อย่างไรก็ตามในไลบรารี CSS post-processor axมีตัวเลือก sibling ก่อนหน้านี้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>

โซลูชัน flexbox อื่น

คุณสามารถใช้ลำดับขององค์ประกอบที่ตรงกันข้ามใน HTML นอกจากใช้orderเป็นคำตอบของ Michael_B แล้วคุณสามารถใช้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>

ไม่มีวิธีที่เป็นทางการที่จะทำในขณะนี้ แต่คุณสามารถใช้เคล็ดลับเล็ก ๆ น้อย ๆ เพื่อให้บรรลุนี้! โปรดจำไว้ว่ามันเป็นการทดลองและมีข้อ จำกัด บางอย่าง ... (ตรวจสอบลิงค์นี้หากคุณกังวลเกี่ยวกับความเข้ากันได้ของระบบนำทาง)

สิ่งที่คุณสามารถทำได้คือใช้ตัวเลือก CSS3: คลาส pseudo ที่เรียกว่า 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>

ข้อ จำกัด

• คุณไม่สามารถเลือกองค์ประกอบก่อนหน้าตามคลาสขององค์ประกอบถัดไป
• นี่เป็นสิ่งเดียวกันสำหรับคลาสหลอก

หากคุณทราบตำแหน่งที่แน่นอนการ:nth-child()ยกเว้นแบบรวมของพี่น้องต่อไปนี้จะใช้ได้

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

ซึ่งจะเลือกทั้งหมดliก่อน 3 (เช่น 1 และ 2) แต่ในความคิดของฉันนี้ดูน่าเกลียดและมี usecase แน่นมาก

คุณสามารถเลือก nth-child จากขวาไปซ้าย:

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

ซึ่งทำเช่นเดียวกัน

ไม่มันไม่สามารถทำได้ผ่าน CSS มันใช้เวลา "แคสเคด" ถึงหัวใจ ;-)

อย่างไรก็ตามหากคุณสามารถเพิ่มJavaScriptลงในหน้าของคุณได้jQueryเล็กน้อยสามารถนำคุณไปสู่เป้าหมายสุดท้ายได้
คุณสามารถใช้ jQuery findเพื่อทำการ "ดูล่วงหน้า" ในองค์ประกอบเป้าหมาย / คลาส / id ของคุณจากนั้นย้อนรอยเพื่อเลือกเป้าหมายของคุณ
จากนั้นคุณใช้ jQuery เพื่อเขียน DOM (CSS) อีกครั้งสำหรับองค์ประกอบของคุณ

จากคำตอบของ Mike Brant คำตอบ jQuery ต่อไปนี้อาจช่วยได้

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

นี่เป็นครั้งแรกเลือกทั้งหมดของที่ทำตามได้ทันที<ul> จากนั้นก็เป็น "backtracks" เพื่อเลือกs ก่อนหน้าทั้งหมดจากชุดนั้น<p>
<p><ul> s

อย่างมีประสิทธิภาพ "พี่น้องก่อนหน้า" ได้รับการคัดเลือกผ่าน jQuery
ตอนนี้ใช้.cssฟังก์ชั่นเพื่อส่งผ่านค่าใหม่ของ CSS สำหรับองค์ประกอบนั้น

ในกรณีของผมกำลังมองหาวิธีที่จะเลือก DIV กับประชาชนได้เป็น#full-widthแต่ถ้ามันมี (อ้อม) DIV .companiesลูกหลานที่มีระดับของ

ฉันควบคุม HTML ทั้งหมดภายใต้.companiesแต่ไม่สามารถแก้ไข HTML ใด ๆ ข้างต้นได้
และน้ำตกมีทิศทางเดียวเท่านั้น: ลง

ดังนั้นฉันสามารถเลือกทั้งหมด#full-widthได้
หรือฉันเลือกได้.companiesว่าทำตามก#full-width.
แต่ฉันไม่สามารถเลือกเฉพาะรายการ#full-widthที่ดำเนินการต่อ .companiesได้

และอีกครั้งฉันไม่สามารถเพิ่มได้ .companiesสูงขึ้นใน HTML ส่วนหนึ่งของ HTML นั้นถูกเขียนจากภายนอกและห่อโค้ดของเราไว้

แต่ด้วย jQuery ฉันสามารถเลือก#full-widths ที่ต้องการจากนั้นกำหนดสไตล์ที่เหมาะสม:

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

สิ่งนี้จะค้นหาทั้งหมด#full-width .companiesและเลือกเฉพาะที่.companiesคล้ายกับวิธีใช้ตัวเลือกเพื่อกำหนดเป้าหมายองค์ประกอบเฉพาะในมาตรฐานใน CSS
จากนั้นก็จะใช้.parentsเป็น "เปลี่ยนใจ" และเลือกพ่อแม่ของ ALL .companies,
แต่กรองผลลัพธ์เหล่านั้นเพื่อให้เพียง#fill-widthองค์ประกอบเพื่อที่ว่าในท้ายที่สุด
ก็เพียงเลือก#full-widthองค์ประกอบถ้ามันมี.companiesลูกหลานชั้น
ในที่สุดมันจะกำหนดค่า CSS ( 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
. ค้นหา : รับลูกหลานของแต่ละองค์ประกอบในชุดปัจจุบันขององค์ประกอบที่ตรงกันกรองโดยตัวเลือกวัตถุ jQuery หรือองค์ประกอบ
. parent : รับพี่น้องก่อนหน้าทันทีของแต่ละองค์ประกอบในชุดขององค์ประกอบที่ตรงกัน หากมีการเลือกตัวเลือกใดตัวเลือกนี้จะดึงข้อมูลรุ่นก่อนหน้านี้เฉพาะเมื่อตรงกับตัวเลือกนั้น (กรองผลลัพธ์เพื่อรวมองค์ประกอบ / ตัวเลือกที่ระบุไว้เท่านั้น)
. css : ตั้งค่าคุณสมบัติ CSS หนึ่งรายการขึ้นไปสำหรับชุดองค์ประกอบที่ตรงกัน

ไม่มี "ก่อนหน้า" ตัวเลือกพี่น้องเป็นที่น่าเสียดาย แต่คุณสามารถเป็นไปได้ยังได้รับผลกระทบเดียวกันโดยใช้การจัดตำแหน่ง (เช่นลอยไปทางขวา) ขึ้นอยู่กับสิ่งที่คุณพยายามจะทำ

ในกรณีของฉันฉันต้องการระบบการจัดอันดับ CSS 5 ดาวเป็นหลัก ฉันต้องการสี (หรือสลับไอคอน) ดาวก่อนหน้า โดยการลอยองค์ประกอบแต่ละอันให้ถูกต้องฉันจะได้รับเอฟเฟกต์เดียวกัน (html สำหรับดวงดาวจึงต้องเขียนว่า 'ถอยหลัง')

ฉันใช้ FontAwesome ในตัวอย่างนี้และแลกเปลี่ยนระหว่าง unicodes ของ 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/

ขึ้นอยู่กับวัตถุประสงค์ที่แน่นอนของคุณมีวิธีการใช้ประโยชน์ของตัวเลือกหลักโดยไม่ต้องใช้ตัวเลือกหนึ่ง (แม้ว่าจะมีอยู่) ...

บอกว่าเรามี:

<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 ที่ด้านบนและรีเซ็ตเป็น 0 สำหรับผู้ที่ไม่มีองค์ประกอบ UL (หรือแท็กอื่น ๆ ) ภายใน LIs

ฉันต้องการวิธีแก้ไขเพื่อเลือกพี่น้องก่อนหน้านี้ ฉันคิดวิธีแก้ปัญหานี้โดยใช้ส่วนประกอบ React และ Styled-component นี่ไม่ใช่ทางออกที่แน่นอนของฉัน (นี่คือจากหน่วยความจำชั่วโมงต่อมา) ฉันรู้ว่ามีข้อบกพร่องในฟังก์ชั่น 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;
    }
`;

ฉันมีปัญหาที่คล้ายกันและพบว่าปัญหาในลักษณะนี้สามารถแก้ไขได้ดังนี้

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>

หวังว่าจะช่วยใครซักคน