如何在CSS文件中为HTML中的特定Label设置样式？

• 给目标Label加ID
  这是最直接的方式，给要设置样式的Label加唯一的id属性，CSS里用#id名选中：
  HTML代码：

  <label id="target-label">特定文本的Label</label>
  <label>其他Label</label>
  <label>另一个Label</label>
  <label>最后一个Label</label>
  

  CSS代码：

  #target-label {
    color: red;
    font-weight: bold;
  }
  

• 使用类名区分
  如果不想用ID，或者多个元素需要相似样式但其中一个要特殊设置，给目标Label加类即可：
  HTML代码：

  <label class="special-label">要设置样式的Label</label>
  <label>普通Label</label>
  <label>普通Label</label>
  <label>普通Label</label>
  

  CSS代码：

  .special-label {
    background-color: #f0f0f0;
    padding: 4px;
  }
  

• 通过属性选择器定位
  要是Label带for属性（关联表单元素），直接根据属性值选中就行：
  HTML代码：

  <label for="username">用户名</label>
  <label for="password">密码</label>
  <label for="email">邮箱</label>
  <label for="phone">手机号</label>
  

  CSS代码：

  label[for="email"] {
    border: 1px solid blue;
  }
  

  也可以用:contains()伪类根据文本内容选中（注意：Firefox原生支持，Chrome/Safari需开启实验性特性，适合快速测试）：

  label:contains("邮箱") {
    color: green;
  }
  

• 结构选择器定位
  如果Label在父容器里的位置固定，用:nth-child()、:last-child这类选择器就能精准定位：
  HTML代码：

  <div class="label-group">
    <label>第一个Label</label>
    <label>第二个Label</label>
    <label>第三个Label</label>
    <label>第四个Label</label>
  </div>
  

  CSS代码：

  /* 选中第3个Label */
  .label-group label:nth-child(3) {
    font-size: 1.2em;
  }
  /* 选中最后一个Label */
  .label-group label:last-child {
    text-decoration: underline;
  }
  

内容的提问来源于stack exchange，提问作者Lubaabah