Wie wähle ich ein Tag mit Text zwischen dem Tag und dem übergeordneten Tag aus?

Question

Wie kann ich mithilfe von CSS zwischen einem Tag unterscheiden, dessen leeres Elternelement leer wäre, wenn es und sein Inhalt gelöscht würden? Ich möchte es eigentlich nicht löschen, ich möchte es nur anders behandeln.

Zum Beispiel mit dem folgenden Beispielcode:

<div><a>test one</a></div> 
<div>My <a>test two</a></div> 
<div>My <a>test three</a> and <a>test four</a> text</div> 
<div><a>Test five</a> text</div> 
<div>My <a>test six</a> text</div> 

Die folgenden CSS:

a:only-child { color: #668899; } 

für alle wählt aber testet drei und vier.

a:not(only-child) { color: #668899; } 

wählt für alle, aber ich würde erwarten, dass es nur testet drei und vier wählen.

Wie wähle ich alle Tests aus außer Testen Sie einen nur mit CSS?

Wenn ich nur die Tests zwei bis sechs mit nur CSS stylen kann, kann ich sie mit jQuery stylen? Wenn das so ist, wie?

Answer 1

Dies ist wahrscheinlich nicht die effizienteste Lösung, aber es funktioniert - vergleichen Sie den Textinhalt jedes Elements <a> mit dem Textinhalt des übergeordneten Elements. Wenn sie die gleichen sind, gelten dann einen anderen Stil:

$('div a').each(function(){ 
 
    if ($(this).text()===$(this).parent().text()) { 
 
    $(this).addClass('onlyChild'); 
 
    } 
 
});

.onlyChild { color: #668899; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div><a>test one</a></div> 
 
<div>My <a>test two</a></div> 
 
<div>My <a>test three</a> and <a>test four</a> text</div> 
 
<div><a>Test five</a> text</div> 
 
<div>My <a>test six</a> text</div>

Answer 2

Gerade jetzt Ihre Regel wird für ein Element suchen genannt only-child

Mit dieser Selektor Regel

a:not(:only-child) { color: #668899; }

Beispieldemo

a:not(:only-child) { color: red; }

<div><a>test one</a></div> 
 
<div>My <a>test two</a></div> 
 
<div>My <a>test three</a> and <a>test four</a> text</div> 
 
<div><a>Test five</a> text</div> 
 
<div>My <a>test six</a> text</div>