Question

我正在从服务器端获取此代码。我没有服务器端PHP代码。现在，我想使用CSS选择器选择所有PDF链接。可能吗？期待答案。谢谢。

<ul>
    <li><a href="file1.txt" target="_blank">Download Text File</a></li>
    <li><a href="file1.pdf" target="_blank">Download pdf File</a></li>
    <li><a href="file1.word" target="_blank">Download word File</a></li>
    <li><a href="file2.pdf" target="_blank">Download pdf File</a></li>
    <li><a href="file2.word" target="_blank">Download word File</a></li>
    <li><a href="file1.txt" target="_blank">Download Text File</a></li>
</ul>

Answer 1

使用an attribute selector，特别是与后缀匹配的$=：

a[href$=".pdf"] {
  /* … */
}

Answer 2

是的，有可能，您可以使用a[href$=".pdf"]进行操作，有关更多详细信息，请阅读此处。 https://css-tricks.com/attribute-selectors/

a[href$=".pdf"] {
  background-color : red; 
  color : #fff;
}

<ul>
	<li><a href="file1.txt" target="_blank">Download Text File</a></li>
	<li><a href="file1.pdf" target="_blank">Download pdf File</a></li>
	<li><a href="file1.word" target="_blank">Download word File</a></li>
	<li><a href="file2.pdf" target="_blank">Download pdf File</a></li>
	<li><a href="file2.word" target="_blank">Download word File</a></li>
	<li><a href="file1.txt" target="_blank">Download Text File</a></li>
</ul>

Answer 3

CSS3允许使用attribute selector $=进行选择：

a[href$=".pdf"] {
  // ...
}

特定href属性值的CSS选择器

3 个答案: