+
是为了下一个兄弟姐妹。以前的兄弟姐妹是否有同等效力?
+
是为了下一个兄弟姐妹。以前的兄弟姐妹是否有同等效力?
不,没有“以前的兄弟”选择器。
在相关的说明, ~
是一般继承兄弟(意思是元素在此之后,但不一定紧接在之后)并且是CSS3选择器。 +
是为了下一个兄弟,是CSS2.1。
看到 相邻的兄弟组合子 从 选择者等级3 和 5.7相邻的兄弟选择器 从 层叠样式表2级修订版1(CSS 2.1)规范。
我找到了一种方式来塑造所有以前的兄弟姐妹(相反的 ~
)可能会根据您的需要而有效。
假设你有一个链接列表,当悬停在一个链接上时,所有以前的链接都应该变为红色。你可以这样做:
/* 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>
order
柔性和网格布局的属性。我将在下面的示例中关注flexbox,但相同的概念适用于Grid。
使用flexbox,可以模拟先前的兄弟选择器。
特别是flex order
属性可以在屏幕上移动元素。
这是一个例子:
当元素B悬停时,您希望元素A变为红色。
<ul> <li>A</li> <li>B</li> </ul>
脚步
制作 ul
一个弹性容器。
ul { display: flex; }
在标记中反转兄弟姐妹的顺序。
<ul>
<li>B</li>
<li>A</li>
</ul>
使用兄弟选择器来定位元素A(~
要么 +
会做) 。
li:hover + li { background-color: red; }
使用flex order
在视觉显示上恢复兄弟姐妹的顺序的属性。
li:last-child { order: -1; }
......瞧!先前的兄弟选择器诞生(或至少模拟)。
这是完整的代码:
ul {
display: flex;
}
li:hover + li {
background-color: red;
}
li:last-child {
order: -1;
}
/* non-essential decorative styles */
li {
height: 200px;
width: 200px;
background-color: aqua;
margin: 5px;
list-style-type: none;
cursor: pointer;
}
<ul>
<li>B</li>
<li>A</li>
</ul>
来自flexbox规范:
默认情况下,Flex项目的显示和排列顺序与它们在源文档中显示的顺序相同。该
order
属性可用于更改此顺序。该
order
属性控制弹性项目在弹性容器中的显示顺序,方法是将它们分配给顺序组。它只需一个<integer>
value,指定flex项的哪个序数组 属于。
最初的 order
所有弹性项的值为0。
使用flex创建的“以前的兄弟选择器”的示例 order
属性。
.container { display: flex; }
.box5 { order: 1; }
.box5:hover + .box4 { background-color: orangered; font-size: 1.5em; }
.box6 { order: -4; }
.box7 { order: -3; }
.box8 { order: -2; }
.box9 { order: -1; }
.box9:hover ~ :not(.box12):nth-child(-1n+5) { background-color: orangered;
font-size: 1.5em; }
.box12 { order: 2; }
.box12:hover ~ :nth-last-child(-1n+2) { background-color: orangered;
font-size: 1.5em; }
.box21 { order: 1; }
.box21:hover ~ .box { background-color: orangered; font-size: 1.5em; }
/* non-essential decorative styles */
.container {
padding: 5px;
background-color: #888;
}
.box {
height: 50px;
width: 75px;
margin: 5px;
background-color: lightgreen;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
cursor: pointer;
}
<p>
Using the flex <code>order</code> property to construct a previous sibling selector
</p>
<div class="container">
<div class="box box1"><span>1</span></div>
<div class="box box2"><span>2</span></div>
<div class="box box3"><span>3</span></div>
<div class="box box5"><span>HOVER ME</span></div>
<div class="box box4"><span>4</span></div>
</div>
<br>
<div class="container">
<div class="box box9"><span>HOVER ME</span></div>
<div class="box box12"><span>HOVER ME</span></div>
<div class="box box6"><span>6</span></div>
<div class="box box7"><span>7</span></div>
<div class="box box8"><span>8</span></div>
<div class="box box10"><span>10</span></div>
<div class="box box11"><span>11</span></div>
</div>
<br>
<div class="container">
<div class="box box21"><span>HOVER ME</span></div>
<div class="box box13"><span>13</span></div>
<div class="box box14"><span>14</span></div>
<div class="box box15"><span>15</span></div>
<div class="box box16"><span>16</span></div>
<div class="box box17"><span>17</span></div>
<div class="box box18"><span>18</span></div>
<div class="box box19"><span>19</span></div>
<div class="box box20"><span>20</span></div>
</div>
Flexbox打破了人们对CSS的长期信念。
一个这样的信念是 CSS中无法使用上一个兄弟选择器。
说这种信念是普遍的,这是轻描淡写的。以下是Stack Overflow相关问题的示例:
如上所述,这种信念并不完全正确。可以使用flex在CSS中模拟先前的兄弟选择器 order
属性。
该 z-index
神话
另一个长期存在的信念是 z-index
仅适用于定位元素。
事实上,最新版本的规格 - W3C编辑的草稿 - 仍然断言这是真的:
z-index
- 价值:汽车| |继承
- 初始:自动
- 适用于:定位元素
- 继承:没有
- 百分比:N / A.
- 媒体:视觉
- 计算值:如指定的那样
(重点补充)
但实际上,这些信息已经过时且不准确。
元素是 弹性物品 要么 网格项目 甚至可以创建堆叠上下文 position
是 static
。
Flex项目绘制与内联块完全相同,除了使用订单修改的文档顺序代替原始 文件订单,和
z-index
除了auto
即使创建堆叠上下文position
是static
。网格项的绘制顺序与内联块完全相同,但订单修改的文档顺序除外 用来代替原始文件订单,和
z-index
除了auto
即使创建堆叠上下文position
是static
。
这是一个演示 z-index
处理未定位的flex项目: https://jsfiddle.net/m0wddwxs/
我有同样的问题,但后来我有一个“呃”的时刻。而不是写作
x ~ y
写
y ~ x
显然这匹配“x”而不是“y”,但它回答“有匹配吗?”问题,简单的DOM遍历可以比在javascript中循环更有效地使你到达正确的元素。
我意识到最初的问题是一个CSS问题所以这个答案可能完全无关紧要,但其他Javascript用户可能会像我一样通过搜索偶然发现问题。
二 技巧。基本上反转HTML中所需元素的HTML顺序并使用
~
下一个兄弟姐妹 运营商:
float-right
+ 逆转HTML元素的顺序div{ /* Do with the parent whatever you know just to make the
inner float-right elements appear where desired */
display:inline-block;
}
span{
float:right; /* float-right the elements! */
}
span:hover ~ span{ /* On hover target it's "previous";) elements */
background:red;
}
<div>
<!-- Reverse the order of inner elements -->
<span>5</span>
<span>4</span>
<span>3</span>
<span>2</span>
<span>1</span>
</div>
direction: rtl;
+逆内元素的顺序.inverse{
direction: rtl;
display: inline-block; /* inline-block to keep parent at the left of window */
}
span:hover ~ span{ /* On hover target it's "previous";) elements */
background:gold;
}
Hover one span and see the previous elements being targeted!<br>
<div class="inverse">
<!-- Reverse the order of inner elements -->
<span>5</span>
<span>4</span>
<span>3</span>
<span>2</span>
<span>1</span>
</div>
+
是为了下一个兄弟姐妹。有没有与以前相同的 兄弟?
!
和 ?
有 2 随后的兄弟选择者
您可以使用HTML中的元素顺序。然后除了使用 order
如在 Michael_B的回答 您可以使用 flex-direction: row-reverse;
要么 flex-direction: column-reverse;
取决于您的布局。
工作样本:
.flex {
display: flex;
flex-direction: row-reverse;
/* Align content at the "reversed" end i.e. beginning */
justify-content: flex-end;
}
/* On hover target its "previous" elements */
.flex-item:hover ~ .flex-item {
background-color: lime;
}
/* styles just for demo */
.flex-item {
background-color: orange;
color: white;
padding: 20px;
font-size: 3rem;
border-radius: 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>
目前没有正式的方法可以做到这一点,但你可以用一个小技巧来实现这一目标!请记住它是实验性的,它有一些限制...... (检查 这个链接 如果你担心导航兼容性)
你可以做的是使用CSS3选择器:伪classe调用 nth-child()
#list>* {
display: inline-block;
padding: 20px 28px;
margin-right: 5px;
border: 1px solid #bbb;
background: #ddd;
color: #444;
margin: 0.4em 0;
}
#list :nth-child(-n+4) {
color: #600b90;
border: 1px dashed red;
background: orange;
}
<p>The oranges elements are the previous sibling li selected using li:nth-child(-n+4)</p>
<div id="list">
<span>1</span><!-- this will be selected -->
<p>2</p><!-- this will be selected -->
<p>3</p><!-- this will be selected -->
<div>4</div><!-- this will be selected -->
<div>5</div>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
</div>