加号选择器(+)用于选择下一个相邻同级。
前一个兄弟姐妹是否有同等的?
加号选择器(+)用于选择下一个相邻同级。
前一个兄弟姐妹是否有同等的?
当前回答
你可以使用双重否定
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>
其他回答
对于我的用例,需要更改焦点上的先前元素样式,并且悬停在父元素中只有两个项。为此,使用了:focuswithin和:hover伪类。
无论何时发生聚焦/悬停事件,都可以选择
.root元素:悬停.element到样式{background color:red;}.root元素:将焦点放在.element中,以设置样式{background color:green;}<div class=“root元素”>文本聚焦</span><input type=“text”placeholder=“type To Style”/></div>
可以按如下方式使用:has()。
.thePrevious:has(+ .theNextSibling)
我使用它来修复重叠的引导模式,如下所示。如果有多个模态,则之前的模态将被隐藏。
.modal.show.modal--open:has(~ .modal.show.modal--open){
opacity: 0;
}
不幸的是,没有“上一个”同级选择器,但您仍然可以通过使用定位(例如向右浮动)获得相同的效果。这取决于你想做什么。
在我的情况下,我想要一个主要的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/
根据您的确切目标,有一种方法可以在不使用父选择器的情况下实现父选择器的有用性(即使存在)。。。
假设我们有:
<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,以用于LI中没有UL元素(或其他标签)的链接。
如果您知道确切的位置,那么基于:nth-child()的排除以下所有兄弟姐妹将起作用。
ul li:not(:nth-child(n+3))
这将选择第三个之前的所有lis(例如第一个和第二个)。但是,在我看来,这看起来很难看,而且用例非常紧凑。
您还可以从右到左选择第n个子项:
ul li:nth-child(-n+2)
这也是一样的。