加号选择器(+)用于选择下一个相邻同级。
前一个兄弟姐妹是否有同等的?
加号选择器(+)用于选择下一个相邻同级。
前一个兄弟姐妹是否有同等的?
当前回答
我需要一个解决方案来选择上一个兄弟tr。我使用React和Styled组件提出了这个解决方案。这不是我的确切解决方案(这是几小时后的记忆)。我知道setHighlighterRow函数存在缺陷。
OnMouseOver一行会将行索引设置为state,并使用新的背景色重新阅读前一行
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;
}
`;
其他回答
没有这样的选择器,但在DOM API中有一个非常只读的属性
Node.previousSibling节点
我解决了这个问题,将元素放在一个柔性框中,然后使用flex direction:column reverse。
然后,我不得不手动反转HTML中的元素(以相反的顺序排列),这看起来很正常,而且很有效!
<div style="display: flex; flex-direction: column-reverse">
<a class="element2">Element 2</a>
<a class="element1">Element 1</a>
</div>
...
<style>
.element2:hover + element1 {
...
}
</style>
不,没有“上一个同级”选择器。
在一个相关的注释中,~表示一般继承兄弟(意味着元素在这个之后,但不一定紧接着),并且是一个CSS3选择器。+用于下一个兄弟姐妹,为CSS2.1。
请参阅选择器级别3中的相邻同级组合符和级联样式表级别2修订版1(CSS 2.1)规范中的5.7相邻同级选择器。
+是给下一个兄弟姐妹的。是否有与前一个相同的兄弟姐妹
您可以使用两个斧头选择器:!和
传统CSS中有两个后续的同级选择器:
+是紧接其后的同级选择器~是任何后续的同级选择器
在传统的CSS中,没有以前的同级选择器。
然而,在axe CSS后处理器库中,有两个先前的同级选择器:
? 是前一个同级选择器(与+相反)! 是之前的任何同级选择器(与~相反)
工作示例:
在以下示例中:
.any后续:hover~div选择任何后续div立即后续:hover+div选择立即后续div.任何以前的:悬停!div选择之前的任何div.上一个:悬停?div选择上一个div
第二部分{显示:内联块;宽度:60px;高度:100px;颜色:rgb(255、255、255);背景色:rgb(255,0,0);文本对齐:居中;垂直对齐:顶部;光标:指针;不透明度:0;过渡:不透明度0.6s缓和;}代码{显示:块;边距:4px;字体大小:24px;线条高度:24px;背景色:rgba(0、0、0和0.5);}div:第n个类型(-n+4){背景色:rgb(0,0,255);}div:第n种类型(n+3):第n个类型(-n+6){不透明度:1;}.any后续:hover~div,.紧随其后:hover+div,.任何以前的:悬停!div中,.上一个:悬停?第二部分{不透明度:1;}<h2>将鼠标悬停在下面的任何块上</h2><div></div><div></div><div class=“immediate previor”>悬停<code></代码>选择器</div><div class=“any previous”>悬停<code></代码>选择器</div><div class=“any后续”>悬停<code>~</code>选择器</div><div class=“immediate后续”>悬停<code>+</code>选择器</div><div></div><div></div><script src=“https://rouninmedia.github.io/axe/axe.js“></script>
这是类似问题的链接
CSS选择所有以前的兄弟姐妹以获得星级
因此,我使用每个人的回答来发布我的解决方案,任何人都可以将其作为参考,并可能提出改进建议。
//仅用于检查输入值//Consts公司const starRadios=document.querySelectorAll('input[name=“rating”]');//事件监听器starRadios.forEach((radio)=>radio.addEventListener('change',getStarRadioValue));//获取星形无线电值函数getStarRadioValue(事件){警报(event.target.value)//用它做点什么};.星级{字体大小:1.5rem;unicode bidi:bidi覆盖;方向:rtl;文本对齐:左侧;}.star-rating.editable标签:悬停{光标:指针;}.star-rating.editable.icon星形:悬停,.star-rating.editable.icon星形:悬停~.icon星形{背景色:#fb2727!重要的}.icon星形{位置:相对;背景色:#72747d;宽度:32px;高度:32px;显示:内联块;过渡:背景色0.3s;}.icon-star填充{背景色:#fb2727;}.icon星形>标签{显示:内联块;宽度:100%;高度:100%;左:0;顶部:0;位置:绝对;}.icon star>标签>输入[类型=“radio”]{位置:绝对;顶部:0;左:0;变换:translateY(50%)translateX(50%);显示:无;}<div class=“星级可编辑”><span class=“icon star”><标签><input type=“radio”name=“rating”value=“5”/></label></span><span class=“icon star”><标签><input type=“radio”name=“rating”value=“4”/></label></span><span class=“icon star”><标签><input type=“radio”name=“rating”value=“3”/></label></span><span class=“icon star”><标签><input type=“radio”name=“rating”value=“2”/></label></span><span class=“icon star”><标签><input type=“radio”name=“rating”value=“1”/></label></span></div>