Css 是否有一个“问题”;“以前的兄弟姐妹”;选择器?
加号(Css 是否有一个“问题”;“以前的兄弟姐妹”;选择器?,css,css-selectors,Css,Css Selectors,加号(+)表示下一个兄弟姐妹 上一个同级是否有等效项?否,没有“上一个同级”选择器 另一方面,~用于一般后继同级(意味着该元素位于该元素之后,但不一定紧随其后),并且是CSS3选择器+用于下一个兄弟姐妹,是CSS2.1 从和从看。我有同样的问题,但后来我有一个“哑巴”时刻。而不是写作 x ~ y 写 y ~ x 显然,这匹配的是“x”而不是“y”,但它回答了“有匹配吗?”的问题,简单的DOM遍历可能比javascript中的循环更有效地找到正确的元素 我意识到原来的问题是一个CSS问题,所以
+
)表示下一个兄弟姐妹
上一个同级是否有等效项?否,没有“上一个同级”选择器
另一方面,~
用于一般后继同级(意味着该元素位于该元素之后,但不一定紧随其后),并且是CSS3选择器<代码>+用于下一个兄弟姐妹,是CSS2.1
从和从看。我有同样的问题,但后来我有一个“哑巴”时刻。而不是写作
x ~ y
写
y ~ x
显然,这匹配的是“x”而不是“y”,但它回答了“有匹配吗?”的问题,简单的DOM遍历可能比javascript中的循环更有效地找到正确的元素
我意识到原来的问题是一个CSS问题,所以这个答案可能完全不相关,但是其他Javascript用户可能会像我一样通过搜索偶然发现这个问题。(以前的主题指示符!
),这将允许您选择一个以前的兄弟:
previous:has(+ next) {}
…但在撰写本文时,它已经超出了浏览器支持的前沿。根据您的具体目标,有一种方法可以实现父选择器的有用性,而无需使用父选择器(即使存在) 假设我们有:
<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>
存在什么:
li > a {
margin-top: 15px;
display: block;
}
li > a:only-child {
margin-top: 0px;
}
这将所有锚点链接设置为顶部有15px的边距,并将LIs中没有UL元素(或其他标记)的锚点链接重置为0。不幸的是,没有“上一个”同级选择器,但您仍然可以通过使用定位(例如向右浮动)获得相同的效果。这取决于你想做什么
在我的例子中,我想要一个主要的CSS五星评级系统。我需要给以前的星星上色(或交换图标)。通过正确浮动每个元素,我基本上得到了相同的效果(因此星星的html必须“向后”编写)
在本例中,我使用了FontAwesome,并在fa-star-o和fa-star的unicodes之间进行了交换
CSS:
HTML:
(40)
jsiddle:如果您知道确切位置,则基于
:nth-child()
排除以下所有同级将起作用
ul li:not(:nth-child(n+3))
这将选择第三个之前的所有li
s(例如第一个和第二个)。但是,在我看来,这看起来很难看,并且有一个非常紧凑的用例
您还可以从右向左选择第n个子项:
ul li:nth-child(-n+2)
这也是一样的。目前还没有官方的方法,但你可以用一个小技巧来实现这一点!请记住,这是实验性的,它有一些局限性。。。 (检查您是否担心导航器兼容性) 您可以使用CSS3选择器:名为
nth-child()的伪类
#list>*{
显示:内联块;
填充:20px28px;
右边距:5px;
边框:1px实心#bbb;
背景:ddd;
颜色:#444;
保证金:0.4em0;
}
#列表:第n个子项(-n+4){
颜色:#600b90;
边框:1px红色虚线;
背景:橙色;
}
oranges元素是使用li:n子元素(-n+4)选择的上一个兄弟元素li
1.
二,
三,
4.
5.
六,
七,
八,
九,
我找到了一种方法来设计所有以前的兄弟姐妹(与~
相反)的样式,这可能会根据您的需要而起作用
假设您有一个链接列表,当将鼠标悬停在其中一个链接上时,前面的所有链接都将变为红色。您可以这样做:
/*默认链接颜色为蓝色*/
.父母a{
颜色:蓝色;
}
/*上一个兄弟姐妹应该是红色的*/
.家长:将鼠标悬停在a上{
颜色:红色;
}
.父a:悬停,
.父级a:悬停~a{
颜色:蓝色;
}
两个技巧。基本上颠倒HTML中所需元素的HTML顺序,并使用
~
下一个同级运算符:
向右浮动
+颠倒HTML元素的顺序
div{/*对父对象执行您所知道的任何操作,以使
内部右浮动元素显示在所需的位置*/
显示:内联块;
}
跨度{
浮动:右;/*将元素向右浮动*/
}
span:hover~span{/*在悬停目标上它是“先前的”;)元素*/
背景:红色;
}
5.
4.
3.
2.
1.
考虑flex和grid布局的顺序
属性。
我将在下面的示例中重点介绍flexbox,但同样的概念也适用于网格
使用flexbox,可以模拟以前的同级选择器。
特别是,flexorder
属性可以在屏幕上移动元素
下面是一个例子:
当元素B悬停时,您希望元素A变为红色
<ul>
<li>A</li>
<li>B</li>
</ul>
在标记中反转同级的顺序。
<ul>
<li>B</li>
<li>A</li>
</ul>
li:hover + li { background-color: red; }
使用flexorder
属性恢复可视显示器上同级的顺序。
li:hover + li { background-color: red; }
li:last-child { order: -1; }
…瞧!以前的同级选择器已生成(或至少已模拟)。
以下是完整的代码:
ul{
显示器:flex;
}
李:悬停+李{
背景色:红色;
}
李:最后一个孩子{
顺序:-1;
}
/*非基本装饰风格*/
李{
高度:200px;
宽度:200px;
背景色:浅绿色;
保证金:5px;
列表样式类型:无;
光标:指针;
}
- B
- A
另一个flexbox解决方案
可以使用HTML中元素的逆序。然后除了使用中的顺序
外,还可以使用弹性方向:行反转代码>或弯曲方向:柱反向代码>取决于您的布局
工作样本:
.flex{
显示器:flex;
弯曲方向:行反向;
/*在“反向”端(即开始)对齐内容*/
证明内容:柔性端;
}
/*悬停目标上的“上一个”元素
li:hover + li { background-color: red; }
li:last-child { order: -1; }
/* 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>
$('p + ul').prev('p')
$("#full-width").find(".companies").parents("#full-width").css( "width", "300px" );
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;
}
`;
<ul>
<li>before</li>
<li class="target">target</li>
<li>after</li>
<li>after</li>
</ul>
ul > li { color: red; }
ul > li.target, ul > li.target ~ li { color: inherit; }
.form-control:focus ~ .form-input-prepend {
svg path {
fill: $accent;
}
}
SELECTOR:not([SELECTOR]FILTER):not([SELECTOR]FILTER + SELECTOR) { ... }
/* 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) {}