使用属性值和CSS选择HTML标记

Question

<link rel="urlValue" href="http://www.something.com" />  

<link rel="alternate" href="http://www.other.com" />

如何使用rel =＆＃34; urlValue＆＃34;？选择 href 值？ 我用JS

完成了这个

document.querySelectorAll('[rel="urlValue"]')[0].baseURI

但我需要使用CSS选择器来实现这一点 预期的O / P：http://www.something.com

Answer 1

您可以使用属性选择器在CSS中执行非常类似的操作：

[rel="urlValue"] {
 // your styles here
}

或

[href="http://www.something.com"] {
 // your styles here
}

进一步阅读：https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Answer 2

是的，CSS也有相同的选择器。您可以使用以下属性选择元素：

*[rel="urlValue"] {
  //your css
}

Answer 3

您只需使用JS执行此操作：

＆＃13;

＆＃13;

var url = document.querySelector("[rel='urlValue']").getAttribute('href');
console.log(url);

＆＃13;

<link rel="urlValue" href="http://www.something.com" />  

<link rel="alternate" href="http://www.other.com" />

＆＃13;

＆＃13;

＆＃13;