Question

考虑下面给出的代码

<body>
  <div>
    <a href="http://www.google.com">Google</a>
    <a href="http://www.gmail.com">Gmail</a>
    <a href="http://www.fb.com">fb</a> 
  </div>
</body>

如果我想在不使用任何类的情况下选择<a>标签，并希望为它们提供不同的属性，有什么办法吗？

Answer 1

使用CSS，您可以检查href属性，如下所示：

a[href^="http://www.g"] {
    color: red;
}

JSFiddle

^=表示＆＃34;从此开始＃34;。 $=表示＆＃34;以此结束＆＃34;。 *=表示＆＃34;包含此＆＃34;。

Answer 2

a { } // all the links
a + a { } // second link 
a + a + a { } // third link

或

a:first-child { } // first link 
a:last-child { } // last link

Answer 3

我想你可以这样做：

document.body.children[0].children[0] // Google link
document.body.children[0].children[1] // Gmail link
document.body.children[0].children[2] // FB link

然而，这是一个非常糟糕的主意，因为只要您更改HTML结构，就必须重写所有代码。

Answer 4

如果您尝试使用CSS，我会说：

 a:nth-of-type(2){color:black;} // Select the second
 a:fist-child { color:red;} // Select the first
 a:last-child { color:blue;} // Select the last

Answer 5

你总是可以在标签内部声明CSS，如下所示：

<a href="http://iodelta.com" style="color:#0F0; font-weight:bold; display:block;">Link Here</a>

Answer 6

使用jquery（http://www.jquery.com）它是着名的JavaScript库来操纵DOM 例如：

$("a")选择所有链接 $("a:contains['Gmail']")选择包含文字gmail的链接

如何在不使用class或id的情况下选择相同的属性？

6 个答案: