使用css选择父项

Question

有没有办法可以使用css选择父项？我的意思是我的结构是这个

<label>
  <input />
<label>

在我的CSS中，我试图做这样的事情，

input['_type_']:checked _parent_ label:after{
  some css
}

我无法在标签中使用 。

Answer 1

不幸的是，CSS中没有父选择器，但您可以在label之后放置input并执行类似的操作（使用相邻的兄弟组合器，＆＃34; +＆＃34 ;，在你的选择器中。

HMTL：

<input />
<label><label>

CSS：

input['_type_']:checked + label:after{ /*means the element that follows input*/
    some css
}

你也可以做一些丑陋的hacky技巧，并在你的标签中添加另一个标签

JSFiddle

HTML：

<label>
  click me
    <input type="checkbox"  />
  <label>color</label>
</label>

CSS：

input[type="checkbox"]:checked + label {
    color: red;
}

通过这种方式，您可以点击标签并使用输入后的另一个标签做一些事情。

HTH。