css - 为什么我不能用 CSS 删除这个边框?

标签 css google-chrome-devtools

<分区>

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

  1. 我正在尝试使用 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 代码不起作用?

  2. 在 Chrome 开发者工具中,有没有办法轻松复制 CSS 选择器?

    例如,在指出 this is the selector 之后.
    有没有办法轻松复制“p.product.woocommerce.add_to_cart_inline”?

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

最佳答案

更改您的 HTML 代码,您在 html p 标记中为边框设置了内联 css

<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>

或者你可以像这样添加 important 到 css:

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

关于css - 为什么我不能用 CSS 删除这个边框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58536007/

上一篇:javascript - 我可以在 CSS 中的 div 上剪切蒙版文本吗(有或没有 JS 的帮助)?

下一篇:css - 在最大宽度容器内占据全宽的下拉菜单

相关文章:

javascript - 将图标与 p 标签对齐

google-chrome - 用于激活/停用断点的 Google chrome 开发面板快捷方式

java - 更改 HTML 对话框的样式 (CSS)

html - 格式错误的开始标记。属性应该用空格分隔。

jQuery 样式 : Setting/Getting width of table before display

javascript - 如何在支持触摸的浏览器中模拟带有触摸的悬停?

javascript - 辅助功能 - 如何找到对比度问题?

javascript - 在 Chrome 中,如何在 Javascript 中获取审核小组分数

javascript - "Pause On Caught Exceptions"过滤器

android - 在 Android 问题上远程调试 Chrome