加号选择器(+)用于选择下一个相邻同级。

前一个兄弟姐妹是否有同等的?


当前回答

我遇到了同样的问题,当我试图更改输入焦点上的前置图标填充颜色时,我的代码看起来像这样:

<template #append>
    <b-input-group-text><strong class="text-danger">!</strong></b-input-group-text>
</template>
<b-form-input id="password_confirmation" v-model="form.password_confirmation" type="password" placeholder="Repeat password" autocomplete="new-password" />

问题是我使用了一个vue引导槽来注入前缀,所以即使我改变了位置,输入后仍然会呈现

嗯,我的解决方案是滑动它们的位置,并添加自定义前缀和使用的~符号,因为css不支持前一个同级。

<div class="form-input-prepend">
    <svg-vue icon="common.lock" />
</div>
<b-form-input id="password_confirmation" v-model="form.password_confirmation" type="password" placeholder="Repeat password" autocomplete="new-password" />

Scss样式

.form-control:focus ~ .form-input-prepend {
    svg path {
        fill: $accent;
    }
}

因此,只需尝试更改其位置,如果需要,请使用css order或position:absolute;以实现您想要的,并避免使用javascript来满足此类需求。

其他回答

我遇到了一个类似的问题,发现所有这类问题都可以通过以下方式解决:

给你的所有物品一种风格。为所选项目指定样式。使用+或~为下一项指定样式。

这样,您就可以设置当前项、先前项(所有项都被当前项和下一项覆盖)以及下一项的样式。

例子:

/* 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>

希望这对某人有所帮助。

虽然没有以前的CSS选择器。我找到了一个快速而简单的方法来自己选择一个。以下是HTML标记:

<div class="parent">
    <div class="child-1"></div>
    <div class="child-2"></div>
</div>

在JavaScript中,只需执行以下操作:

document.querySelector(".child-2").parentElement.querySelector(".child-1")

这将首先选择父div,然后从child-2 div中选择child-1 div。

如果您使用jQuery,只需执行以下操作:

$(".child-2").prev()

我需要一个解决方案来选择上一个兄弟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;
    }
`;

不,没有“上一个同级”选择器。

在一个相关的注释中,~表示一般继承兄弟(意味着元素在这个之后,但不一定紧接着),并且是一个CSS3选择器。+用于下一个兄弟姐妹,为CSS2.1。

请参阅选择器级别3中的相邻同级组合符和级联样式表级别2修订版1(CSS 2.1)规范中的5.7相邻同级选择器。

/*向所有子级添加样式,然后撤消目标的样式以及你目标的兄弟姐妹*/ul>li{颜色:红色;}ul>li目标,ul>li.target~li{颜色:继承;}<ul><li>之前</li><li class=“target”>目标</li><li>之后</li><li>之后</li></ul>