css - 没有同级输入 type=checkbox||radio 的标签的 CSS 选择器是什么？

Question

我需要用 CSS 设置它，而不是 jquery。

选择器用于

所有没有同胞的标签，即复选框或单选组件。

一个样本是：

<span>
  <input id="item" type="checkbox">
  <label for="item">Data</label>
</span>

这是因为我有将标签设置为 12px 的 CSS，但它会影响 asp:checkboxes 和 asp:radio...，但我不希望它们受到影响。

Answer 1

对于没有某种同级的元素，没有 CSS 选择器。

但是，如果您可以保证您的结构始终是inputa 后跟 a label，那么您可以使用带有:not()like 的 next-sibling 组合器来匹配label：

input:not([type="checkbox"]):not([type="radio"]) + label

否则，您将不得不向这些标签添加类，或者使用 jQuery。

Answer 2

尝试相邻的兄弟选择器：

input[type='text'] + label ​{ // your styles }​​

您需要将其应用于您需要的所有前辈。但是除了你不想要的复选框和收音机之外，使用标签的可能性并不多；）

演示

Answer 3

如果兄弟姐妹在您的目标元素之前，您可以根据它们拥有的兄弟姐妹类型来选择元素。您可以对目标的先前兄弟姐妹进行任何类型/选择器检查。

您可以使用nth-last-of-typeand向后退nth-last-child，但是您不能对跟随目标的元素进行任何选择器检查，并且您可以对跟随的元素进行的唯一类型检查是计算有多少相同类型。

因此，在您的情况下，您可以使用：

label {
  /* your styling here */
}

input[type="checkbox"] + label, input[type="radio"] + label {
  /* remove the styling for labels preceded by a checkbox or radio button */
}

如果您希望输入和标签之间有其他元素，请使用~而不是。+

根据您正在使用的跨度内可能包含的其他元素，任何“第 n 个”伪类都可能对您有用。

如果您只关心标签没有前面的兄弟，这也适用于您的示例：

label:first-child {
  /* awesome styles */
}

Answer 4

我提交了一个我认为非常有价值的问题的答案，并且与您在这个问题中的要求一致。这是该问题/答案的永久链接。

https://stackoverflow.com/a/43132408/6167697

缺少的可能不适用于您的情况的关键是我建议input仅将 sa 孩子保留为他们需要的内容，以便可以使用通用兄弟选择器选择其他内容。假设您仍然可以将它们保留在 中span，然后label在 中的各种元素中使用 s span，这仍然可以让您将这些标签与我认为的任何其他标签分开处理。我将复制一个工作示例的代码片段，该示例演示label不是其 s 的兄弟元素但input仍可以设置样式的元素。

* {
  padding: 0;
  margin: 0;
  background-color: #262626;
  color: white;
}

.radio-button {
  display: none;
}

#filter {
  padding: 5% 0;
  display: flex;
  justify-content: center;
}

.filter-label {
  display: inline-block;
  border: 4px solid green;
  padding: 10px 20px;
  font-size: 1.4em;
  text-align: center;
  cursor: pointer;
}

main {
  clear: left;
}

.content {
  padding: 3% 10%;
  display: none;
}

h1 {
  font-size: 2em;
}

.date {
  padding: 5px 30px;
  font-style: italic;
}

.filter-label:hover {
  background-color: #505050;
}

#featured-radio:checked~#filter .featured,
#personal-radio:checked~#filter .personal,
#tech-radio:checked~#filter .tech {
  background-color: green;
}

#featured-radio:checked~main .featured {
  display: block;
}

#personal-radio:checked~main .personal {
  display: block;
}

#tech-radio:checked~main .tech {
  display: block;
}

<input type="radio" id="featured-radio" class="radio-button" name="content-filter" checked="checked">
<input type="radio" id="personal-radio" class="radio-button" name="content-filter" value="Personal">
<input type="radio" id="tech-radio" class="radio-button" name="content-filter" value="Tech">

<header id="filter">
  <label for="featured-radio" class="filter-label featured" id="feature-label">Featured</label>
  <label for="personal-radio" class="filter-label personal" id="personal-label">Personal</label>
  <label for="tech-radio" class="filter-label tech" id="tech-label">Tech</label>
</header>

<main>
  <article class="content featured tech">
    <header>
      <h1>Cool Stuff</h1>
      <h3 class="date">Today</h3>
    </header>

    <p>
      I'm showing cool stuff in this article!
    </p>
  </article>

  <article class="content personal">
    <header>
      <h1>Not As Cool</h1>
      <h3 class="date">Tuesday</h3>
    </header>

    <p>
      This stuff isn't nearly as cool for some reason :(;
    </p>
  </article>

  <article class="content tech">
    <header>
      <h1>Cool Tech Article</h1>
      <h3 class="date">Last Monday</h3>
    </header>

    <p>
      This article has awesome stuff all over it!
    </p>
  </article>

  <article class="content featured personal">
    <header>
      <h1>Cool Personal Article</h1>
      <h3 class="date">Two Fridays Ago</h3>
    </header>

    <p>
      This article talks about how I got a job at a cool startup because I rock!
    </p>
  </article>
</main>

这也具有纯 CSS 的额外好处！根据另一篇文章，这是JSFIDDLE，因此您可以自己玩弄它。