是否可以使用纯CSS在悬停时删除/更改兄弟类的样式？
我已经尝试过这样的事情并且悲惨地失败了。
HTML：
# write to csv
with open('court_addresses.csv', 'w') as csvfile:
fieldnames = [court_name, full_court_link, clean_address]
writer = csv.DictWriter(csvfile, fieldnames=fieldnames)
writer.writerow(fieldnames)
^^^^^^^^^^^ This should be a dict
SCSS
<ul>
<li class="item active">name1</li>
<li class="item">name2</li>
<li class="item">name3</li>
<li class="item">name4</li>
</ul>
那么我想要实现什么...我希望在任何元素上赋予它特定的风格，同时我想隐藏活动元素的风格。活动元素是随机的，它可以是第三个，第二个，第一个，第四个等...列表最多可达10个元素。这个例子很简单。
修改！重要！ 我看到人们在理解我到底想要什么时遇到了问题，我希望这个掠夺者会澄清一切：）
答案 0 :(得分：2)
使用给定的布局，order 属性（使用 Flexbox 或可以实现唯一的纯CSS 解决方案>网格）：
ul {
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
}
li {
cursor: pointer;
list-style: none;
padding: 12px 16px;
}
li:last-child {
order: -1; /* moved back up to achieve the same layout */
}
.active {
background-color: blue;
color: white;
}
li:hover {
background-color: blue;
color: white;
}
li:hover ~ .active {
background-color: white;
color: black;
}<ul>
<li class="item">name2</li>
<li class="item">name3</li>
<li class="item">name4</li>
<li class="item active">name1</li> <!-- has to be the last in order for the ~ selector to take effect -->
</ul>
答案 1 :(得分：1)
“那么我想要实现什么...我希望在任何元素上赋予它特定的风格，同时我想隐藏活动元素的风格。活动元素是随机的，它可以是第三，第二，第一，第四等...列表最多可达10个元素。“
<小时/> 只使用CSS，可以获得该行为，但布局需要更改，因为使用纯CSS解决方案来处理复杂行为涉及：
与其他元素相关的特定元素位置。由于CSS级联和继承限制，必须仔细规划父/祖父与子女和兄弟关系。
需要特定属性和某些元素的默认行为，这些元素对于组，类型，标记等是唯一的。因此，仅使用列表和CSS将无法获得所需的行为。
<input id='chx0' type="checkbox" hidden='true'>是不可见的开关，用于确定其他元素的 state （一组特定的样式）。当复选框 :checked 或未选中时，所有受影响的元素都会处于有效状态。
<label id='btn0' for='chx0'></label>是用户点击的按钮，然后远程点击此属性定位的复选框：
for= "chx0"
由于规则集的级联只有 继续 的元素，因此复选框可能会受到影响，这基本上是 next <的任何兄弟元素/ em> 关注DOM树（包括兄弟姐妹的子女/后代。）我用人类家庭的角度来看待它：
上一个元素同级 <section> 哥哥 </section>
参考点 ? <input id='chx0' type='checkbox'>
Next-Element-Sibling <li> 弟弟 </li>
你可以选择你的弟弟，但你不能选择你的哥哥。
在演示2 中，有2个复选框/标签组合：
ACTIVE / INACTIVE 处理.active元素的行为方式。
ORDER / CHAOS 操纵<dd>的 order （不是为了好玩而添加的要求）
<小时/> 我不知道SCSS，但从我所看到的是你期望兄弟姐妹或兄弟姐妹改变风格，但从我看到，general sibling combinator
~正在起作用，但风格无效：白色背景和黑色文本。此演示使用带有反色的adjacent sibling combinator +，因此您可以实际看到更改。
ul {
padding: 0;
margin: 0;
}
li {
cursor: pointer;
list-style: none;
padding: 12px 16px;
}
li.active {
background-color: blue;
color: white;
}
li:hover {
background-color: blue;
color: white;
}
li:hover+li {
background-color: black !important;
color: white !important;
}<ul>
<li class="item active">name1</li>
<li class="item">name2</li>
<li class="item">name3</li>
<li class="item">name4</li>
</ul>
.dataList {
display: flex;
flex-flow: column nowrap;
}
.btn {
background: rgba(0, 0, 0, 0);
padding: 3px 5px;
margin: 20px 0 -15px 30px;
border: 2px ridge grey;
border-radius: 4px;
cursor: pointer;
display: inline-block;
width: 12ch;
text-align: center;
}
#btn0::before {
content: 'ACTIVE';
color: green;
}
#chx0:checked~#btn0::before {
content: 'INACTIVE';
color: tomato;
}
#btn1::before {
content: 'ORDER';
color: blue;
}
#chx1:checked~#btn1::before {
content: 'CHAOS';
color: orange;
}
#chx1:checked~.dataList dd:nth-of-type(1) {
order: 8
}
#chx1:checked~.dataList dd:nth-of-type(2) {
order: 5
}
#chx1:checked~.dataList dd:nth-of-type(3) {
order: 6
}
#chx1:checked~.dataList dd:nth-of-type(4) {
order: 10
}
#chx1:checked~.dataList dd:nth-of-type(5) {
order: 3
}
#chx1:checked~.dataList dd:nth-of-type(6) {
order: 2
}
#chx1:checked~.dataList dd:nth-of-type(7) {
order: 4
}
#chx1:checked~.dataList dd:nth-of-type(8) {
order: 1
}
#chx1:checked~.dataList dd:nth-of-type(9) {
order: 7
}
#chx1:checked~.dataList dd:nth-of-type(10) {
order: 9
}
.data {
color: white;
background: rgba(0, 0, 0, 0.8);
border: 2px inset white;
padding: 3px 5px
}
.active {
color: gold;
border: 2px ridge gold;
background: rgba(0, 0, 0, 1);
}
.active::after {
content: ' is ACTIVE';
font-weight: 900;
}
#chx0:checked~.dataList:hover .data.active {
border: 2px inset white;
color: white;
background: rgba(0, 0, 0, 0.8);
}
#chx0:checked~.dataList:hover .active::after {
content: '';
font-weight: normal;
}
.data:hover {
color: #000;
background: #fff;
}
.data.active:hover {
color: lime;
border-color: lime;
background: #000;
}
#chx0:checked~.dataList .data.active:hover {
color: #000;
background: #fff;
}<input id='chx0' type='checkbox' hidden='true'>
<input id='chx1' type='checkbox' hidden='true'>
<label id='btn0' class='btn' for='chx0'></label>
<label id='btn1' class='btn' for='chx1'></label>
<dl class='dataList'>
<dt class='data term'>DATA LIST</dt>
<dd class='data'>ITEM 0</dd>
<dd class='data'>ITEM 1</dd>
<dd class='data'>ITEM 2</dd>
<dd class='data'>ITEM 3</dd>
<dd class='data active'>ITEM 4</dd>
<dd class='data'>ITEM 5</dd>
<dd class='data'>ITEM 6</dd>
<dd class='data'>ITEM 7</dd>
<dd class='data'>ITEM 8</dd>
<dd class='data'>ITEM 9</dd>
</dl>
答案 2 :(得分：0)
我认为您可能还需要将＆符号添加到活动选择器中，如下所示：
li {
cursor: pointer;
list-style: none;
padding: 12px 16px;
&.active {
background-color: $primary-blue;
color: white;
}
&:hover {
background-color: $primary-blue;
color: white;
~ &.active {
background-color: white !important;
color: black !important;
}
}
}