CssSelector 組件

編輯此頁面

CssSelector 組件將 CSS 選擇器轉換為 XPath 表達式。

安裝

1
$ composer require symfony/css-selector

注意

如果您在 Symfony 應用程式之外安裝此組件，您必須在程式碼中引入 vendor/autoload.php 檔案，以啟用 Composer 提供的類別自動載入機制。閱讀這篇文章以了解更多詳細資訊。

用法

另請參閱

本文說明如何在任何 PHP 應用程式中將 CssSelector 功能用作獨立組件。閱讀Symfony 功能測試文章，以了解如何在建立 Symfony 測試時使用它。

為何使用 CSS 選擇器？

當您解析 HTML 或 XML 文件時，目前為止最強大的方法是 XPath。

XPath 表達式非常靈活，因此幾乎總是能找到您需要的元素的 XPath 表達式。不幸的是，它們也可能變得非常複雜，而且學習曲線陡峭。即使是常見的操作（例如尋找具有特定類別的元素）也可能需要冗長且笨拙的表達式。

許多開發人員，尤其是網頁開發人員，更習慣使用 CSS 選擇器來尋找元素。除了在樣式表中使用之外，CSS 選擇器也用於 JavaScript 中的 querySelectorAll() 函數以及流行的 JavaScript 函式庫（例如 jQuery）。

CSS 選擇器不如 XPath 強大，但更容易編寫、閱讀和理解。由於它們功能較弱，幾乎所有 CSS 選擇器都可以轉換為等效的 XPath。然後，此 XPath 表達式可以與其他使用 XPath 在文件中尋找元素的函數和類別一起使用。

CssSelector 組件

組件的唯一目標是使用 toXPath() 將 CSS 選擇器轉換為其 XPath 等效項

1
2
3
4
use Symfony\Component\CssSelector\CssSelectorConverter;

$converter = new CssSelectorConverter();
var_dump($converter->toXPath('div.item > h4 > a'));

這會產生以下輸出

1
descendant-or-self::div[@class and contains(concat(' ',normalize-space(@class), ' '), ' item ')]/h4/a

您可以將此表達式與 DOMXPath 或 SimpleXMLElement 等一起使用，以在文件中尋找元素。

提示

Crawler::filter() 方法使用 CssSelector 組件來根據 CSS 選擇器字串尋找元素。請參閱DomCrawler 組件以了解更多詳細資訊。

CssSelector 組件的限制

並非所有 CSS 選擇器都可以轉換為 XPath 等效項。

有幾個 CSS 選擇器僅在網頁瀏覽器的上下文中才有意義。

  • 連結狀態選擇器： :link、:visited、:target
  • 基於使用者動作的選擇器： :hover、:focus、:active
  • UI 狀態選擇器： :invalid、:indeterminate (但是，:enabled、:disabled、:checked 和 :unchecked 可用)

偽元素（:before、:after、:first-line、:first-letter）不受支援，因為它們選擇的是文字部分而不是元素。

部分支援偽類別

  • 不支援： *:first-of-type、*:last-of-type、*:nth-of-type 和 *:nth-last-of-type（所有這些都適用於元素名稱（例如 li:first-of-type），但不適用於 * 選擇器）。
  • 支援： *:only-of-type、*:scope、*:is 和 *:where。

7.1

Symfony 7.1 中引入了對 *:is 和 *:where 的支援。

了解更多

本作品，包括程式碼範例，均根據 Creative Commons BY-SA 3.0 授權條款授權。
目錄
    版本