Question

如何使用CSS区分标记，如果标记被删除，其父标记是否为空？我实际上并不想删除它，我只是想以不同的方式对待它。

例如，给出以下示例代码：

<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>

以下CSS：

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

选择除了测试三和四之外的所有。

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

选择所有，但我希望它选择仅测试三和四。

如何选择所有测试除了仅使用CSS进行测试？

如果我只能用CSS测试2到6的测试样式，我可以用jQuery设置样式吗？如果是这样，怎么样？

Answer 1

这可能不是最有效的解决方案，但它可行 - 将每个<a>元素的文本内容与其父级的文本内容进行比较。如果它们是相同的，那么应用不同的风格：

$('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

现在您的规则正在寻找名为only-child

的元素

使用此选择器规则

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

示例演示

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>

如何选择标记与其父标记之间带有文字的标记？

2 个答案: