爬蟲之CSS語法學習

carrt發表於2024-10-23
爬蟲CSS

屬性選擇器用於根據 HTML 元素的屬性和值來選擇元素。不同的屬性選擇器語法適用於各種匹配需求。讓我們逐一解釋每種語法，並給出相應的例子：

1. [attr]

  • 選擇具有指定屬性的所有元素，不考慮屬性值。
  • 語法：[attr]
  • 例子：選擇所有有 name 屬性的元素。
    <input type="text" name="username">
<input type="password" name="password">
<input type="submit">
    CSS 選擇器：[name]
    • 這個選擇器會選擇第一個和第二個 <input>，因為它們有 name 屬性。

2. [attr=value]

  • 選擇具有指定屬性，且屬性值等於指定值的元素。
  • 語法：[attr=value]
  • 例子：選擇 name="username" 的元素。
    <input type="text" name="username">
<input type="password" name="password">
    CSS 選擇器：[name="username"]
    • 這個選擇器會選擇第一個 <input>，因為它的 name 屬性等於 "username"。

3. [attr~=value]

  • 選擇具有指定屬性，且屬性值包含一個以空格分隔的列表，其中至少有一個值等於指定值的元素（類似於 class 屬性匹配）。
  • 語法：[attr~=value]
  • 例子：選擇 class 屬性中包含 btn 的元素。
    <button class="btn primary">Submit</button>
<button class="btn secondary">Cancel</button>
    CSS 選擇器：[class~="btn"]
    • 這個選擇器會選擇所有具有 btn 類的按鈕。

4. [attr|=value]

  • 選擇具有指定屬性，且屬性值是以指定值開頭的，或者等於該值，值可以用連字元（-）後接其他內容。
  • 語法：[attr|=value]
  • 例子：選擇 lang="en" 或者 lang 以 en- 開頭的元素。
    <html lang="en">
<html lang="en-US">
<html lang="fr">
    CSS 選擇器：[lang|="en"]
    • 這個選擇器會選擇前兩個 <html> 標籤，因為 lang 屬性等於 "en" 或以 "en-" 開頭。

5. [attr^=value]

  • 選擇具有指定屬性，且屬性值以指定值開頭的元素。
  • 語法：[attr^=value]
  • 例子：選擇 href 屬性以 "https" 開頭的連結。
    <a href="https://example.com">Link 1</a>
<a href="http://example.com">Link 2</a>
    CSS 選擇器：[href^="https"]
    • 這個選擇器會選擇第一個 <a> 標籤，因為它的 href 以 "https" 開頭。

6. [attr$=value]

  • 選擇具有指定屬性，且屬性值以指定值結尾的元素。
  • 語法：[attr$=value]
  • 例子：選擇 src 屬性以 .png 結尾的圖片。
    <img src="image1.png">
<img src="image2.jpg">
    CSS 選擇器：[src$=".png"]
    • 這個選擇器會選擇第一個 <img> 標籤，因為 src 以 .png 結尾。

7. [attr*=value]

  • 選擇具有指定屬性，且屬性值包含指定值的元素。
  • 語法：[attr*=value]
  • 例子：選擇 href 屬性中包含 example 的連結。
    <a href="https://example.com">Link 1</a>
<a href="https://anotherexample.com">Link 2</a>
<a href="https://somethingelse.com">Link 3</a>
    CSS 選擇器：[href*="example"]
    • 這個選擇器會選擇前兩個 <a> 標籤，因為它們的 href 屬性中包含 "example"。

總結

屬性選擇器使得我們可以根據 HTML 元素的屬性及其值進行靈活、精確的選擇，適用於不同的匹配需求：

  • [attr]：選擇具有指定屬性的元素。
  • [attr=value]：選擇屬性值完全等於指定值的元素。
  • [attr~=value]：選擇屬性值中包含指定值（透過空格分隔）的元素。
  • [attr|=value]：選擇屬性值以指定值開頭或等於指定值的元素（通常用於語言或其他類似屬性）。
  • [attr^=value]：選擇屬性值以指定值開頭的元素。
  • [attr$=value]：選擇屬性值以指定值結尾的元素。
  • [attr*=value]：選擇屬性值包含指定值的元素。

相關文章