如何在 CSS 中选择特定标签？答案

【问题标题】：How to select particular label in CSS?如何在 CSS 中选择特定标签？
【发布时间】：2021-06-15 04:41:21
【问题描述】：

我在这里附上了我的截图，我需要在 css 中选择红色边框标签。我如何选择那个特定的标签。

【问题讨论】：

标签： html css

【解决方案1】：

如果您无法编辑 HTML，您可以通过元素的属性来定位元素。因此，您可以这样做：

label[for="value-here"]{
  /* styles */
}

如上所述，最好给元素一个类或一些唯一标识符，以便定位它。

【讨论】：

【解决方案2】：

用那个很长的名字替换for_value。

label[for="for_value"] {
  /* CSS Properties */
}

最好为标签分配一个类。

HTML

<label class="new-label"></label>

CSS

.new-label {
 /* Styles */
}

【讨论】：

【解决方案3】：

向其添加类或 id 并使用类/id 名称访问它。

<label class="my_label" id="my_label_id" for="rn_Select"><span></span></label>

css

    .my_label{
    /*style goes here*/
    }

   #my_label_id{
    /*style goes here*/
   }

【讨论】：

【解决方案4】：

由于您使用具有相同文本的值，我不建议您使用label[for="for_value"]，但您在输入中使用定义 id 并且在它旁边的标签是您要选择作为选择器的标签。所以，你可以使用Adjacent sibling selectors:

input#your_input_id + label{
   /*css rules*/
}

【讨论】：

【解决方案5】：

我在我们的 WooCommerce 网站上遇到了一种情况，其中“添加到购物车”按钮就在自定义产品字段旁边，我需要将产品字段放在按钮下方。为了使它看起来正确，我需要能够为输入字段选择标签。这就是最终为我解决问题的 CSS。

#product-57310 label[for="wcj_product_input_fields_local_1"] { display: -webkit-box!important; margin-top: 80px; }

其中“#product-57310”是woocommerce中产品的ID，因此它仅适用于特定产品页面而不是每个产品页面，其中“label[for="wcj_product_input_fields_local_1"]”针对的是第一个标签专门用于“添加到购物车”按钮下。

【讨论】：