CSS 代码无法正常工作它应该在 WordPress 标头中答案

【问题标题】：CSS code not working the way It should in the WordPress headerCSS 代码无法正常工作它应该在 WordPress 标头中
【发布时间】：2020-03-25 05:52:14
【问题描述】：

我希望按钮的尺寸更短，如下图所示：

但是当我将自定义 CSS 添加到 WordPress 网站时，它改变了按钮大小。

#menu-item-11695 {
    box-shadow: 0px 7px 14px -7px #3e7327;
    background:linear-gradient(to bottom, #77b55a 5%, #72b352 100%);
    background-color:#77b55a;
    border-radius:3px;
    border:1px solid #4b8f29;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:13px;
    font-weight:bold;
    padding:9px 8px;
    text-decoration:none;
    text-shadow:0px 1px 0px #5b8a3c;
}
#menu-item-11695:hover {
    background:linear-gradient(to bottom, #72b352 5%, #77b55a 100%);
    background-color:#72b352;
}
#menu-item-11695:active {
    position:relative;
    top:1px;
}

【问题讨论】：

看起来您想要按钮上的边距，而不是填充。

标签： html css wordpress

【解决方案1】：

您应该检查按钮的父级。您的按钮可能从其父级获得 100% 的高度。

【讨论】：

感谢您的帮助，知道如何获取父代码并更改 100% 高度吗？
使用 chrome 开发工具检查父级并向我们展示渲染的代码。

【解决方案2】：

试试这个：

#menu-item-11695 {
    box-shadow: 0px 7px 14px -7px #3e7327;
    background:linear-gradient(to bottom, #77b55a 5%, #72b352 100%);
    background-color:#77b55a;
    border-radius:3px;
    border:1px solid #4b8f29;
    display:inline-block;
    cursor:pointer;
    color:#ffffff !important;
    font-family:Arial;
    font-size:13px;
    font-weight:bold;
    padding:9px 8px !important;
    text-decoration:none;
    text-shadow:0px 1px 0px #5b8a3c;
}

您可以在分号之前添加“！important”，Wordpress 将忽略其他样式并改为应用这些样式。但是您应该非常精确地选择选择器。

【讨论】：

这是一种糟糕的编码方式，因为它会使您的样式脱离工作表的层叠样式。只需在您定义的 ID 之前添加父类或元素，因为它会给它更多权重，因此使用它的样式。
感谢您的帮助。我添加了 !important 但它仍然不起作用。