Question

在我的表单中，我希望HTML标签一般是粗体，但在标记单选按钮和复选框时不是粗体。

如何在可以导入的CSS中执行此操作并默认工作，而不需要本地覆盖样式？

示例无线电标签（不应该是粗体）

<label for="banana">
<input type="radio" name="banana" id="banana" value="banana" />Banana
</label>

示例非广播标签（应为粗体）

<label for="id">ID</label>
<input type="text" size="12" id="id" name="id" />

如果有关系，我可以更改我关联标签的方式。

谢谢！

Answer 1

如果没有给出正确的标签类或使用Javascript，你就无法做到这一点。使用jQuery选择器，您可以这样做：

$("label:not(:has(radio))").addClass("boldmenow");
...
.boldmenow {
  font-weight: bold;
}

Answer 2

如果将标记扩展为以下内容：

<label for="banana">
    <input type="radio" name="banana" id="banana" value="banana" /><span>Banana</span>
</label>

然后你可以使用这个CSS：

label {
    font-weight: bold;
}
label span {
    font-weight: normal;
}

Answer 3

简短的回答是，你不能，可靠。如果你试图让它在许多常用的浏览器中运行，比如IE6,7，Firefox等，你必须依靠JavaScript而不是CSS来识别文档中符合样式规则的元素并应用每个元素的类。

对于跨浏览器兼容性，您需要在分类元素中包装阵列字段标签，或者将类应用于标签以将它们与普通标签分开。

我在这里要做的是将无线电选项的列表包装在（非）有序列表中（用于语义）和单个段落中的普通文本字段。

E.g。普通名称：值对：

<div class="form_row">
  <label for="txtFirstName">First Name</label>
  <p>
    <input type="text" class="text" name="firstName" id="txtFirstName" />
  </p>
</div>

然后是名称：数组对：

<div class="form_row">
  <label>Gender</label>
  <ul>
    <li><label for="rdoGenderMale"><input type="radio" class="radio" name="gender" id="rdoGenderMale" value="male" />&nbsp;Male</label></li>
    <li><label for="rdoGenderFemale"><input type="radio" class="radio" name="gender" id="rdoGenderFemale" value="female" />&nbsp;Female</label></li>
  </ul>
</div>

现在要适当地设置样式，你可以为名称标签编写正常的规则：

div.form_row label {font-weight:bold;}
div.form_row ul {list-style:none;}
  div.form_row ul label {font-weight:normal;}

hth，ndorfin

Answer 4

您可以为单选按钮的标签添加一个类，然后以不同的方式设置它们。

<label for="banana" class="radio">

然后CSS可以默认使标签变粗，然后覆盖它以使它们正常。

label { font-weight: bold }
label.radio { font-weight: normal; }

Answer 5

基本上，你不能因为IE不支持它（所以使用类代替）但是如果IE工作正常并且CSS3得到很好的支持你可以使用像这样的通用兄弟选择器：

input[type="radio"]~label {font-weight: bold;}

请注意，IE并不真正支持那里的属性选择器。

我如何（默认情况下）以不同的方式设置不同类型的标签？

5 个答案: