jQuery 動態修改 CSS 屬性屬性選擇器用法：針對 path[data-classbreak] 修改 fill

問題

CSS 規則：`path[data-classbreak="classbreak3"] { fill: #00008B; }`。需在回調中用 jQuery 動態修改該類別的 `fill` 屬性。

核心概念

• `path`：SVG 元素標籤名。
• `[data-classbreak="classbreak3"]`：**屬性選擇器**，匹配擁有此屬性且值為 `classbreak3` 的元素。
• CSS 中後定義的同權重規則覆蓋前者；**內聯樣式（style 屬性）優先級最高**。

jQuery 修改方案

// 1. 直接設置內聯樣式（最高優先級）
$('path[data-classbreak="classbreak3"]').css('fill', '#CCC');

// 2. 若元素有 class，也可用 class 選擇器配合屬性
$('.myPathClass[data-classbreak="classbreak3"]').css('fill', '#CCC');

原理說明

`.css('property', 'value')` 會為匹配元素設置 `style="property: value"` 內聯樣式，覆蓋樣式表規則。屬性選擇器在 jQuery 中語法與 CSS 完全一致。

注意事項

• SVG 的 `fill` 是**表現屬性**，也可用 `.attr('fill', '#CCC')` 修改屬性節點，但內聯樣式優先級更高。
• 若需切換多組樣式，建議預定義 CSS 類，用 `.addClass()`/`.removeClass()` 切換，而非逐條改 style。
• 動態新增的 SVG 元素同樣適用，只要選擇器匹配即可。