Question

我有一个我无法修改的HTML代码：

<div>
    <input type="text" id="name" />
</div>

使用CSS我在输入后添加一个标签（在输入字段后不起作用）：

div:after { 
    content:'label' 
}

现在我想根据输入字段修改标签，如何选择：after元素？

input.error + * {
    color: red;
}

不幸的是我不能使用javascript，只能使用CSS！

Answer 1

我相信如果不添加html元素或使用jquery，你要做的就是不可能。

Answer 2

目前无法使用CSS设置父元素的样式您始终可以使用js / jquery为父级设置样式 $('input').parent();

但是，将来会有:has()伪类，因此父母的样式看起来像这样：
div:has(>input)，它将选择包含子<input>的所有div。

如果您不想使用javascript。然后你将不得不改变HTML 使div成为输入字段的兄弟将使得可以使用兄弟组合器：
+将仅选择相邻的兄弟，而~将查找任何兄弟。
我想注意一下，不可能看看以前的兄弟姐妹。

查看此演示：

＆＃13;

input ~ div {
  background-color: green;
}

input + div {
  color: white;
}

＆＃13;

<div>div not selected</div>
<input type="text" id="name" />
<div>div selected by both sibling combinators</div>
<div>div selected only by the general sibling combinator</div>
<div>selected also only by the general sibling combinator</div>

＆＃13;

选择：在容器

2 个答案: