我可以选择<a> only when there&#39;s no text around it?

Question

I would like to select anchor tags only when they're completely by themselves, that way I can make those look like buttons, without causing anchors within sentences to look like buttons. I don't want to add an extra class because this is going within a CMS.

I originally was trying this:

article p a:first-child:last-child {
    background-color: #b83634;
    color: white;
    text-transform: uppercase;
    font-weight: bold;

    padding: 4px 24px;
}

But it doesn't work because text content isn't considered as criteria for :first-child or :last-child.

I would like to match

<p><a href='#'>Link</a></p>

but not

<p><a href='#'>Link</a> text content</p>

or

<p>text content <a href='#'>Link</a></p>

Is this possible with CSS?

Answer 1

简单的答案是：不，你不能。

正如here，here和here所解释的那样，没有适用于文本节点的CSS选择器。

如果您可以使用jQuery，请查看contains selector。

Answer 2

不幸的是，不能，你不能。

你必须自己使用JS或者它的任何librady来与元素的内容进行交互，并找到内容中每个元素的位置。

如果您希望我用JS示例更新我的答案，请先提出要求。

Answer 3

我认为通常不可能，但你可以接近。以下是一些有用的起点：

1. 唯一子选择器，可让您选择所有a个没有兄弟姐妹的a:only-child {/* css */}元素。:not(p) > a {/* css */}。查看更多here。 （另见编辑）

2. 非选择器，它允许您排除某些元素，可能使用h1行中的某些内容，这些内容应选择不在段落中的所有锚点。请参阅一些有用的信息here。

3. 组合选择器尽可能具体。您可能希望所有锚点都不在p中，所有锚点都不在a:only-child, :not(p) > a {/* css */} 中。

示例：

最终产品可能如下所示：

button

这应该选择仅属于子节点的所有锚点和不在段落中的锚点。

最后说明：

您可能需要考虑将按钮设为实际input或{{1}}标签，以使您的生活更轻松。首先获取HTML通常会使CSS更简单。

编辑：唯一的孩子会忽略文字，所以这里几乎没用。我想这比我想象的要差。

Answer 4

jQuery代码示例：

// this will select '<p><a></a></p>' or '<p><a></a>text</p>'
// but not '<p><a></a><a></a></p>'
$('p').has('a:only-child').each(function() {
    const p = $(this); // jQuerify
    let hasalsotext = false;
    p.contents().each(function(){
        if ((this.nodeType === 3) && (this.nodeValue.trim() !== "")) {
            hasalsotext = true;
            return false; // break
        }
    });
    if (!hasalsotext) {
        $('a', p).addClass('looks-like-a-button');
    }
});