Question

将图标应用于使用属性选择器的链接，或者通过脚本添加类是很常见的。例如：

// HTML
<a href="foo.doc">This is an ordinary text link</a>

// CSS

a[href$=".doc"] {
    background: url('bar.jpg') 0 0 no-repeat;
    padding-left: 2em;
}

(etc)

这在独立链接上看起来很好，我指的是这种类型的东西：

<p>Some paragraphs of text</p>
<p><a href="foo.pdf">Get the full report in a massive pretty PDF</a></p>
<p>More paragraphs</p>

但内联链接看起来很可怕，我的意思是这种东西：

<p>Lorem ipsum dolor sit amet, <a href="foo.pdf">consectetur adipiscing</a> elit ... </p>

我希望能够有选择地将图标应用于第一种情况而不是第二种情况。

那么有没有办法可靠地区分两者（使用我想象的脚本）？

尝试过STFW但是如果只是我的术语失败就道歉。

Answer 1

您可以在CSS中使用更具体的选择器来指定独立锚点：

/* stand-alone anchor tag */
a {
}

/* inline anchor tag */
p a {
}

Answer 2

您可以使用以下图标添加元素：

a::before{
    background: url('bar.jpg') 0 0 no-repeat;
    width:2em;
    height:2em;
    content:" ";
}

Answer 3

具体来说，为了区分这两者，您可以使用jQuery将每个锚点与包含锚点的每个父项进行比较，如果它们匹配，则应用一种样式，如果不应用另一种样式：

html：

<p>
Lorem ipsum dolor sit amet <a href="">link inside a paragraph with other text</a> Lorem ipsum dolor sit amet.
</p>

<p>
<a href="">link alone in a paragraph</a>
</p>

css：

.standalone {
  background-color: red;
}

.inline {
  background-color: green;
}

jQuery的：

$(document).ready(function(){
    $('a').each(function(){
    var parent = $(this).parent().html().trim();
    var myTag = $(this).wrap('<p/>').parent().html().trim();//wrap in a temp container to get the <a> as well
    $(this).unwrap();

    if(parent === myTag) {
        $(this).addClass('standalone');
    } else {
        $(this).addClass('inline');
    }
  })
});

https://jsfiddle.net/y40o11hu/2/

这将为每个链接执行此操作，但初始选择器可以是您想要的任何内容，因此它可以减少到$（'a [href $ =“。doc”]'）或其他任何内容。

如何区分内联链接和独立链接

3 个答案: