0

jqueryではなくCSSで設定する必要があります。

セレクターは

チェックボックスまたは無線コンポーネントである兄弟を持たないすべてのラベル。

サンプルは次のとおりです。

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

これは、ラベルを12pxに設定するCSSがあるためですが、asp：checkboxesとasp：radio ...に影響しますが、影響を受けたくないのです。

4

4 に答える 4

2

特定の種類の兄弟を持たない要素のCSSセレクターはありません。

ただし、構造の後に常にがinput続くことを保証できる場合は、次の兄弟コンビネータを次のように使用して、 ：と一致させるlabelことができます。:not()label

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

それ以外の場合は、これらのラベルにクラスを追加するか、jQueryを使用する必要があります。

于 2012-09-10T17:34:30.053 に答える
1

隣接する兄弟セレクターを試してください：

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

つまり、必要なすべての前任者にそれを適用する必要があります。しかし、チェックボックスと不要なラジオ以外にラベルを使用する可能性は多くありません;）

デモ

于 2012-09-10T17:40:12.840 に答える
0

兄弟がターゲット要素の前にある場合は、兄弟の種類に基づいて要素を選択できます。ただし、ターゲットの先行する兄弟に対して、必要なタイプ/セレクターチェックをいくらでも実行できます。

nth-last-of-typeとを使用して逆方向に移動することは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 */
}
于 2012-09-10T17:48:43.950 に答える
0

私は非常に価値があると思う質問への回答を提出し、この質問であなたが求めているものに沿っています。これがその質問/回答へのパーマリンクです。

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

inputあなたのケースではうまくいかないかもしれない欠けている重要なことは、他のコンテンツが一般的な兄弟セレクターを使用してセレクターできるように、saの子を必要なものだけに保つことを提案します。仮に、それらをに保持してから、内のさまざまな要素でsをspan使用することもできます。これにより、これらのラベルを他のラベルとは別に扱うことができます。まだスタイルを設定できるの兄弟ではない要素を示す実用的な例のコードスニペットをコピーします。labelspanlabelinput

* {
  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があるので、自分で試してみることができます。

于 2017-03-31T04:30:34.217 に答える