为什么我不能删除带有 CSS 的边框？

Question

我有两个问题想寻求您的帮助：

我正在尝试使用 CSS 删除灰色边框，但似乎无法删除它。

我的代码是：

<p class="product woocommerce add_to_cart_inline " style="border:4px solid #ccc; padding: 12px;">
  <span class="woocommerce-Price-amount amount">
    <span class="woocommerce-Price-currencySymbol">$</span>
    29.00
  </span>
  <a href="?add-to-cart=511" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart"
    data-product_id="511" data-product_sku="plan1" aria-label="Add “Plan 1” to your cart" rel="nofollow">
    Add to cart
  </a>
</p>

我的CSS是：

p.product.woocommerce.add_to_cart_inline {
  border:0px;
}

span.woocommerce-Price-amount.amount {
  display:none
}

Here is my JSFiddle.
有人可以告诉我为什么我的 CSS 代码不起作用吗？

在Chrome开发者工具中，有没有办法轻松复制CSS选择器？

例如指出this is the selector后.
有没有办法轻松复制"p.product.woocommerce.add_to_cart_inline"？

现在我自己手动打出来。我很确定应该有一种方法可以直接复制并粘贴它？

Answer 1

更改 HTML 代码 css 用于 html p 标签

中的边框

<p class="product woocommerce add_to_cart_inline " padding: 12px;"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29.00</span><a href="?add-to-cart=511" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="511" data-product_sku="plan1" aria-label="Add “Plan 1” to your cart" rel="nofollow">Add to cart</a></p>

或者您可以像这样向 css 添加重要信息：

p.product.woocommerce.add_to_cart_inline {border:none!important;}

Answer 2

由于 css specificity 规则

，它不起作用

您正在 p 标签中添加内联边框样式，它比 css 选择器更具特异性。

要解决此问题，请从内联中删除边框样式并使用另一个 css 选择器应用它。

此处更新fiddle

p.product.woocommerce {
  border: 4px solid #ccc;
  padding: 12px;
}

p.product.woocommerce.add_to_cart_inline {
  border: 0px;
}

span.woocommerce-Price-amount.amount {
  display: none
}

<p class="product woocommerce add_to_cart_inline"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29.00</span><a href="?add-to-cart=511" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="511"
    data-product_sku="plan1" aria-label="Add “Plan 1” to your cart" rel="nofollow">Add to cart</a></p>

Answer 3

从样式属性中删除边框 css 样式

<p class="product woocommerce add_to_cart_inline " style="padding: 12px;"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29.00</span><a href="?add-to-cart=511" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="511" data-product_sku="plan1" aria-label="Add “Plan 1” to your cart" rel="nofollow">Add to cart</a></p>

Answer 4

添加 !important

p.product.woocommerce.add_to_cart_inline {border:none!important;}

为什么我不能删除带有 CSS 的边框？

Why cant I remove this border with CSS?

css

google-chrome-devtools