加号选择器(+)用于选择下一个相邻同级。

前一个兄弟姐妹是否有同等的?


当前回答

虽然没有以前的CSS选择器。我找到了一个快速而简单的方法来自己选择一个。以下是HTML标记:

<div class="parent">
    <div class="child-1"></div>
    <div class="child-2"></div>
</div>

在JavaScript中,只需执行以下操作:

document.querySelector(".child-2").parentElement.querySelector(".child-1")

这将首先选择父div,然后从child-2 div中选择child-1 div。

如果您使用jQuery,只需执行以下操作:

$(".child-2").prev()

其他回答

不幸的是,没有“上一个”同级选择器,但您仍然可以通过使用定位(例如向右浮动)获得相同的效果。这取决于你想做什么。

在我的情况下,我想要一个主要的CSS五星评级系统。我需要为之前的星星上色(或更换图标)。通过将每个元素向右浮动,我基本上得到了相同的效果(因此,星星的html必须写为“向后”)。

我在本例中使用FontAwesome,并在fa-star-o和fa-star的unicode之间进行交换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/

目前还没有正式的方法来做到这一点,但你可以使用一个小技巧来实现这一点!请记住,它是实验性的,并且有一些限制。。。(如果您担心导航器兼容性,请检查此链接)

您可以做的是使用CSS3选择器:名为nth-child()的伪类

#列表>*{显示:内联块;填充:20px 28px;右边距:5px;边框:1px实心#bbb;背景:#ddd;颜色:#444;边距:0.4em 0;}#列表:第n个子项(-n+4){颜色:#600b90;边框:1px红色虚线;背景:橙色;}<p>orange元素是使用li:nth child(-n+4)选择的上一个同级li</p><div id=“list”><span>1</span><!--将选择--><p>2</p><!--将选择--><p>3</p><!--将选择--><div>4</div><!--将选择--><div>5</div><p>6个</p><p>7个</p><p>8个</p><p>9个</p></div>

局限性

不能基于下一个元素的类选择上一个元素伪类也是如此

你可以使用双重否定

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

用TAG或.CLASS替换SELECTOR(使用#ID可能太具体)。将FILTER替换为其他:PSUEDO-SELECTOR(我只尝试过:悬停)或.CLASS(更多关于通过Javascript切换的信息)。

因为典型的用法可能依赖于悬停(参见下面的示例)

/* 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) {}

/*解决方案*/div.parent:hover>div.child:not(:hover):not(:悬停~.child){背景色:红色;边界半径:1.5em;}div.parent:hover>div.child:not(:hover):not(:悬停~.child)>div{背景色:黄色;}/*做得漂亮(有点)*/分部租金{宽度:9em;高度:9em;/*布局*/显示:栅格;栅格样板列:自动自动;栅格样板行:自动自动;}分部子项{/*尺寸*/高度:3em;宽度:3em;/*布局*/位置:相对;/*光标*/光标:指针;/*演示文稿*/边框:1px黑色实心;边界半径:1.5em;}.星{/*尺寸*/宽度:2.5em;高度:2.5em;/*放置*/位置:绝对;顶部:50%;左:50%;转换:转换(-50%,-50%);/*几何形状*/-webkit剪辑路径:多边形(50% 0%,63% 38%,100% 38%,69% 59%,82% 100%,50% 75%,18% 100%,31% 59%,0% 38%,37% 38%);剪辑路径:多边形(50% 0%,63% 38%,100% 38%,69% 59%,82% 100%,50% 75%,18% 100%,31% 59%,0% 38%,37% 38%);/*演示文稿*/背景色:浅灰色;}div.child:悬停{/*演示文稿*/背景色:黄色;边界半径:1.5em;}div.child:悬停>div.star{/*演示文稿*/背景色:红色;}<div class=“parent”><div class=“child”href=“#”></div></div><div class=“child”href=“#”></div></div><div class=“child”href=“#”></div></div><div class=“child”href=“#”></div></div><div class=“child”href=“#”></div></div><div class=“child”href=“#”></div></div><div class=“child”href=“#”></div></div><div class=“child”href=“#”></div></div><div class=“child”href=“#”></div></div></div>

可以按如下方式使用:has()。

.thePrevious:has(+ .theNextSibling)

我使用它来修复重叠的引导模式,如下所示。如果有多个模态,则之前的模态将被隐藏。

.modal.show.modal--open:has(~ .modal.show.modal--open){
   opacity: 0;
 }

另一种flexbox解决方案

您可以使用与HTML中元素的顺序相反的方式。然后除了使用Michael_B的答案中的顺序外,还可以使用灵活的方向:行反转;或弯曲方向:列反转;这取决于您的布局。

工作样本:

.flex弯曲{显示:柔性;弯曲方向:行反转;/*在“反转”结尾(即开头)对齐内容*/调整内容:柔性端;}/*在悬停目标上,其“先前”元素*/.flex项:悬停~.flex项{背景色:石灰;}/*仅用于演示的样式*/.flex项目{背景色:橙色;颜色:白色;填充:20px;字体大小:3rem;边界半径: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>