3

私は次のDOM構造を持っています:

<label>
    <select>
    ...
    </select>
    records at one one time
</label>

records at one timeここで、メディア クエリを使用してモバイル ベースのブラウザー内で Web ページを表示する場合 、テキストを非表示にするつもりです。

私の質問は、ここでテキストを選択するにはどうすればよいですか? この DOM はライブラリ (DataTables) によって自動的に生成されることに注意してください。私はそれを制御できないため、スパン クラスを追加することはできません。モバイルブラウザの場合、選択のみが表示され、表示されないことを望みますrecords at one time-どうすればこれを達成できますか?

4

3 に答える 3

2

CSS にはそのようなセレクターはありません。セレクターは要素または疑似要素のみを選択でき、ここで役立つ疑似要素はありません。

labelただし、要素に非表示にする要素とテキストのみが含まれている場合は、CSS を使用してテキストを非表示にすることができますselect。要素を非表示にして、label要素を「再表示」しselectます。display: noneすべての子を非表示にするため、は使用できません。しかし、他の方法があります。

おそらく最も簡単なのはこれです：

label { visibility: hidden;}
select { visibility: visible; }

selectまたは、フォント サイズを 0 に設定してから、要素の目的のフォント サイズを設定することもできます。

label { font-size: 0; }
select { font-size: 12pt; }

残念ながら、ここでは物理単位でフォント サイズを設定する必要があります (またはrem単位を使用しますが、ブラウザのサポートはまだ制限されています)。

一部のブラウザには最小フォント サイズの設定がありますが、ゼロ フォント サイズには適用されないようです。

于 2013-04-07T08:41:33.313 に答える
0

これはどう？

label {
   font-size: 0;
}
label p {
   font-size: 14px;
}
于 2013-04-07T08:46:03.867 に答える
-2

例として、次の HTML を取り上げます。

<label>
    <p class="test">This is a test</p>
    records at one one time
</label>

それは、適用したいスタイリングの種類によって異なります。要素のbox-modelに影響を与えない限り、ラベルにデフォルトの css スタイルを適用することでそれを行うことができます。これは、p タグの有無にかかわらず両方のテキストに影響します。

label {
    color:red;
}

次に、次を使用して p タグ内のテキストをオーバーライドできます。

label p {
    color:yellow;
}

これで、p タグのないテキストだけが赤色になっていることがわかります。

デモ

于 2013-04-07T07:29:32.893 に答える