Css 我可以选择<；a>；只有在有'；周围没有文字吗？

我只想在锚标签完全独立的情况下选择它们，这样我就可以使它们看起来像按钮，而不会使句子中的锚看起来像按钮。我不想添加一个额外的类，因为这是在一个CMS内

我最初是这样尝试的：

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

    padding: 4px 24px;
}

但它不起作用，因为文本内容不被视为

：第一个孩子

或

：最后一个孩子

的标准

我想比赛

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

但不是

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

文本内容

或

文本内容

---

CSS可以做到这一点吗？

不幸的是，不行

您必须使用JS本身或其任何库来与元素的内容交互，并找到内容中每个元素的位置

---

如果你想让我用一个JS示例更新我的答案，请询问。

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

如前所述，没有适用于文本节点的CSS选择器

---

如果您可以使用jQuery，请看一下。

我认为这通常是不可能的，但您可以接近。以下是一些有用的开始位置：

唯一子选择器，它允许您选择所有

a

元素，这些元素没有像这样的同级元素

a:Only Child{/*css*/}

。查看更多。（另请参见编辑）

Not选择器，它允许您排除某些元素，可能使用类似于

：Not（p）>a{/*css*/}

的内容，该选项应选择段落中不包含的所有锚点。请参阅一些有用的信息

组合选择器要尽可能具体。您可能希望所有锚点不在

h1

中，并且所有锚点不在

p

中

示例：

最终产品可能如下所示：

a:only-child, :not(p) > a {/* css */}

这应该选择所有仅为子项的锚定和不在段落中的锚定

最后一个注释：

您可能需要考虑按钮的实际操作，例如：代码>按钮>代码>或代码>输入< /代码>标签，以使您的生活更轻松。首先正确使用HTML通常会使CSS更简单

编辑：独生子会忽略文本，因此这在这里几乎没有用处。我想这比我想象的更不可行。

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');
    }
});

//这将选择“
”或“文本”
”
//但不是“
”
$（'p'）。有（'a:独生子'）。每个（函数（）{
const p=$（this）；//jqueryify
设hasalsotext=false；
p、 contents（）.每个（函数（））{
if（（this.nodeType==3）和&（this.nodeValue.trim（）！==“”）{
hasalsotext=true；
返回false；//中断
}
});
如果（！hasalsotext）{
$（'a'，p）.addClass（'looks-like-a-button'）；
}
});

你不能使用jQuery/JavaScript吗？我可能可以，但如果可能的话，我宁愿使用CSS。这是一个更有趣的问题，看看是否可能。虽然这正是我想要的，但我确实有其他选择。请尝试

：empty

伪类。它的一个缺点是元素必须是完全空的（没有空格、制表符等）

：空的

不起作用，因为链接本身不是空的，父链接也不是空的。@Paulie\u您是对的。我没有把问题读完整。呃，别担心。我可以为此编写JavaScript。我只是希望有一个CSS唯一的解决方案。那会很整洁的，伊姆霍。洛蒂；事实上，这确实很好，但是。。。我很抱歉给了你一个否定的答案，但有时候就是这样：）是的，有时候你就是无法按照你想要的方式去做我已经习惯了，你知道有没有一种方法可以让一个按钮表现得像一个锚，而不使用表单或JS？我认为没有这两个是不可能的。我见过有人在锚点中包装按钮，但这是无效的HTML，可能并不总是有效。jQuery包含选择器在这里只是有助于检测是否包含一些文本，而不是检测周围是否有文本。首先，您必须找到带有：only child s的s，然后检查这些s是否存在文本节点同级。我在下面发布了一个代码示例。

// 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');
    }
});