html - 不影响子元素(按钮)的 CSS 样式

Question

现在，如果我将 inactiveLink 类添加到 <a>它还会影响内部的按钮。他们不能再被点击了。我必须做另一种风格吗activeLink重新打开这些功能还是有办法只影响 <a>元素而不影响里面的按钮？

如果没有别的办法，默认是什么cursor和 pointer-events按钮？

HTML

<a class="text-body selectable-element inactiveLink">
    [...]
    <button>Click</button>
</a>

CSS

a.inactiveLink {
    pointer-events: none;
    cursor: default;
}

Answer 1

虽然另一个答案可以工作 (在我输入此内容时已将其删除)，但真正的问题是:如果您想要停用 anchor ，是否真的应该在其中放置一个事件按钮？

随着网站/应用程序的扩展，其他开发人员会知道该类的作用吗？我认为 CSS 就这样很好，但 HTML 可以四处移动，以便那些事件元素存在于非事件 anchor 之外(可能在共享父元素中)。值得深思!

如果您只想快速修复，请将类“always-active”添加到按钮，并添加以下 CSS:

.always-active {
    cursor: auto;
    pointer-events: auto;
}

a.inactiveLink {
    pointer-events: none;
    cursor: default;
}
button.always-active {
    pointer-events: auto;
    cursor: auto;
}

<a class="text-body selectable-element inactiveLink">
    [...]
    <button class="always-active" onClick="alert('it works')">Click</button>
</a>