Question

我想获得与dd标记对应的dt元素的锚点。

我的代码看起来像

<dl>
<dt> Web URL </dt>
<dd> <a href = "link"> name </a></dd>  <--- want to get the name corresponding to the Web URL dt tag.
</dl>

目前我正在使用CSS选择器：

dl dd:nth-child(8) a

有更好的方法，我可以使用dt元素吗？

Answer 1

adjacent或general兄弟运营商可能会提供帮助。实施例

dt + dd { ... }

将匹配dd元素后面的每个dt元素，或

dt ~ dd { ... }

将匹配具有dd元素的dt元素作为任何前任。

您也可以将这些运算符与更复杂的选择器结合使用：

dt + dd a {
  color: red;
}

<dl>
<dt>Test</dt>
<dd>Name</dd>
<dd><a>URL 1</a></dd>
<dt>Web URL</dt>
<dd><a>URL 2</a></dd>
<dl>

CSS规则仅匹配URL 2。

Answer 2

如果我推断出您的意图，您希望通过其文字内容获得具体的<a>。使用CSS，您可以通过其`href'属性及其值来定位。使用JavaScript和jQuery，您可以定位它的文本内容。以下演示展示了使用JavaScript，jQuery和CSS的方法。

详情在演示

中发表

演示

/* JavaScript change color to gold
==================================
|| Gather all <a> in a NodeList
*/
var lnx = document.querySelectorAll('a');

/* Loop thru lnx with for...of loop
|| On each iteration, check to see if
|| any <a> have the content: ' alpha '
|| and then change the color to gold
*/
for (let a of lnx) {
  if (a.textContent === ' alpha ') {
    a.style.color = 'gold';
  }
}

/* jQuery change the font-size to 40px
=======================================
|| Find all <a> that contains the text: ' alpha '
|| Change its font-size to 40px
*/
$('a:contains( alpha )').css('font-size', '40px');

/* CSS change background to black
=================================
|| Find all <a> with the href property that
|| has the text 'Alpha' anywhere in its value.
|| *= {Anywhere in value}
|| ^= {Beginning of value}
|| $= {End of value}
*/


/* ^= would work in this case as well */

a[href*='Alpha'] {
  background: black
}

<dl>
  <dt> Web URL </dt>
  <dd> <a href="https://en.wikipedia.org/wiki/Alpha"> alpha </a></dd>
  <!-- want to get the name corresponding to the Web URL dt tag.-->
  <dd> <a href="https://www.merriam-webster.com/dictionary/bravo"> bravo </a></dd>
  <dd> <a href="https://en.wikipedia.org/wiki/Charlie"> Charlie </a></dd>
  <dd> <a href="https://www.delta.com/"> delta </a></dd>
  <dt> Site Map </dt>
  <dd> <a href="echo.html"> echo </a></dd>
  <dd> <a href="foxtrot.html"> foxtrot </a></dd>
  <dd> <a href="golf.html"> golf </a></dd>

</dl>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

CSS Selector：找到对应于dt标签的dd元素？

2 个答案:

演示