CSS选择以前的兄弟 [英] CSS select previous sibling

问题描述

我有一个进度条，有两个孩子（部分）。每当这些孩子被徘徊时，进步的总高度及其孩子将改变。我已经设法解决第一个孩子使用下一个兄弟选择器，但我找不到第二个孩子的解决方案（黄色部分）。到目前为止，我已经使用jQuery解决了这个问题，但我想在纯CSS中这样做。

fiddle：https://jsfiddle.net/zfh263r6/5/

  $（'＃start'）。 on（{mouseenter：function（）{//$(this).css('height'，'4px'）; // $（'progress'）.css（'height'，'4px'）;}，mouseleave ：function（）{//$(this).css('height'，''）; // $（'progress'）.css（'height'，''）;}}）;  

  #progress_wrap {position：relative; height：4px; / * max height of progress * / background：＃f3f3f3;} progress {appearance：none; -moz-appearance：none; -webkit-appearance：none; width：100％; border：none; height：2px; transition：all .25s ease-in; cursor：pointer; background-color：#fff; position：absolute; top：0;左：0;显示：block;} progress：hover，progress：hover + #start {height：4px} progress [value] {/ *重置默认外观* / -webkit-appearance：none; -moz-appearance：none;外观：无; / *在Firefox中去掉默认边框。 * / border：none; / *对于IE10 * / color：＃f8008c;} progress [value] ::  -  webkit-progress-bar {background-color：#fff; border：none;} progress [value] ::  -  webkit-progress-value {background：＃f8008c} progress ::  -  ms-progress-value {background：＃f8008c} progress ::  -  moz-progress-bar { ＃f8008c} progress ::  -  ms-fill {border：none} #start {height：2px; transition：all .25s ease-in; cursor：pointer; background-color：＃ffe232; position：absolute; top：0; left：0px; width：30px;}  

 < script src = ：//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< div id =progress_wrap> < progress min =0max =1value =0.66id =progress>< / progress> < div id =startstyle =display：inline-block; left：50px;>< / div>< / div>  

解决方案

没有CSS没有以前的兄弟选择器，但你可以使用〜 selector -

假设您有一个链接列表，当鼠标悬停在其上时，您可以这样做：

  / *默认链接颜色是蓝色* /。parent a {color：blue;} / * previous兄弟应该是红色* /。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>

**** courtesy- @mantish ****

I have a progress bar which has two children(parts). Whenever each of this children is hovered the total height of the progress and its children will change. I have managed to solve for the first children using the next sibling selector but I can't find a solution for the second children (the yellow part). Up to now I have solved this using jQuery but I want to do this in pure CSS.

fiddle: https://jsfiddle.net/zfh263r6/5/

$('#start').on({
  mouseenter: function () {
	  //$(this).css('height', '4px');
      //$( 'progress' ).css('height', '4px');
  },
  mouseleave: function () {
	  //$(this).css('height', '');
     // $( 'progress' ).css('height', '');
  }
});

#progress_wrap {
    position: relative;
    height: 4px; /*max height of progress*/
    background: #f3f3f3;
}

progress {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    width: 100%;
    border:none;
    height: 2px;
    transition:all .25s ease-in;
    cursor: pointer;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
}

progress:hover, progress:hover + #start {height: 4px}

progress[value]  {
    /* Reset the default appearance */
    -webkit-appearance: none;
     -moz-appearance: none;
    	  appearance: none;

    /* Get rid of default border in Firefox. */
    border: none;

    /* For IE10 */
    color: #f8008c;
}

progress[value]::-webkit-progress-bar {
    background-color: #fff;
    border:none;
}

progress[value]::-webkit-progress-value {background:#f8008c}

progress::-ms-progress-value {background:#f8008c}

progress::-moz-progress-bar {background:#f8008c}

progress::-ms-fill {border: none}

#start {
    height: 2px;
    transition: all .25s ease-in;
    cursor: pointer;
    background-color: #ffe232;
    position: absolute;
    top: 0;
    left: 0px;
    width: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="progress_wrap">
  <progress min="0" max="1" value="0.66" id="progress"></progress> 
  <div id="start" style="display: inline-block; left: 50px;"></div>
</div>

解决方案

No CSS doesn't have a previous sibling selector but you can use ~ selector -

Let's say you have a list of links and when hovering on one, all the previous ones should turn red. You can do it like this:

/* 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>

****courtesy- @mantish ****

这篇关于CSS选择以前的兄弟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！