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

Question

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

Answer 1

如果您无法编辑HTML，则可以按其属性定位元素。所以你可以这样做：

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

如上所述，最好为元素提供一个类或一些唯一标识符，以便进行定位。

Answer 2

将for_value替换为那个很长的名字。

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

最好是为标签指定一个类。

<强> HTML

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

<强> CSS

.new-label {
 /* Styles */
}

Answer 3

为其添加一个类或ID，并使用class / id name访问它。

<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*/
   }

Answer 4

由于您使用的是相同文字的价值，我建议您不要使用label[for="for_value"]，但是您在输入中使用定义ID并在其旁边标签是哪个你想选择作为选择器。因此，您可以使用Adjacent sibling selectors：

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

Answer 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"]”针对的是第一个标签专门用于“添加到购物车”按钮下。