目錄

標記選擇器語法   

基本語法使用

高階屬性選擇功能

jQuery式選擇器

多值類匹配

標記選擇器語法   

官網地址：https://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html#appendix-c-dom-selector-syntax

     Thymeleaf 的標記選擇器直接從 Thymeleaf 的解析庫（AttoParser）中借⽤。該選擇器的語法與 XPath，CSS 和 JQuery 中的選擇器具有很⼤的相似性，這使得它們可以⽅便⼤多數⽤戶使⽤。 

     例如，以下選擇器將在標記內的每個位置中選擇每個類名包含content的<div>標籤：

<div th:include="mytemplate :: [//div[@class='content']]">...</div>

基本語法使用

The basic syntax inspired from XPath includes:

1. /x ：表示名為 x 的當前節點的直接⼦節點。
2. //x ：表示任何深度的名為 x 的當前節點的⼦節點。
3. x[@z=“v”] ：表示屬性 z 的值為 “v”的節點 x
4. x[@z1="v1" and @z2="v2"] ：表示屬性 z1 的值為 "V1"，且屬性 z2 的值為“v2”的節點 x
5. x[i] ：表示元素 x 位於其同輩元素之中的第 i 個元素
6. x[@z =“v”] [i] ：表示屬性 z 的值為“v”的元素 x，在所有兄弟節點中取第 i 個元素

But more concise syntax can also be used(但也可以使用更簡潔的語法)：

1. x 完全等同於 //x（在任何深度級別搜尋標籤 x）
2. 只要屬性引數設定規範，選擇器也可以不加元素名稱 / 引⽤。所以 [@class ='oneclass'] 也是⼀個有效的選擇器，⽤於查詢具有值為 “oneclass” 的類屬性的任何元素（標籤）。

----------公共頁面-------------
<!--定義公共的頭部，commonHeader 為模板片段名稱-->
<header th:fragment="commonHeader">
    <h2>護龍山莊</h2>
</header>

----------引用頁面----直接根據標籤名稱進行選擇---------
<header th:replace="commons/commons::header"></header>

高階屬性選擇功能

Advanced attribute selection features:

1）除了上面使用到的 "="(等於)以外 ，還可以使用其他⽐較運算子如 "!="(不等於)，"^="(以什麼開始)，"$="(以什麼結尾)。使用過 JQuery 的就知道這些選擇器完全與 JQuery 同理。

例如：x[@class ^='section'] 表示 class 屬性值以 section 開頭的元素 x。

2）屬性引數中的 "@" 符可寫可不寫，@ 是 XPath 風格的寫法，不寫 @ 是 JQuery 風格的寫法，Thymeleaf 兩者都支援，所以如下兩句完全等價：

x[@z='v']   等價   x[z='v']

3）多屬性修飾符 "[...]" 可以使用 "and" 連線多個屬性(XPath 風格)，也可以直接使用多個修飾符 "[...]"(JQuery風格)，如下所示完全等價：

x[@z1='v1' and @z2='v2']     //純 XPath 風格

x[@z1='v1'][@z2='v2']     //XPath 風格+JQuery風格

x[z1='v1' and z2='v2']     //XPath 風格+JQuery風格

x[z1='v1'][z2='v2']     //純 JQuery分隔

----------------公共頁面------------------------
<!--定義公共的頭部，commonHeader 為模板片段名稱-->
<header th:fragment="commonHeader" name="commonH">
    <h2>護龍山莊2</h2>
</header>

----------------引用頁面------------------------
<header th:replace="commons/commons::header[name='commonH']"></header>
//純粹為了演示，實際應用中不會這麼多此一舉

jQuery式選擇器

Direct jQuery-like selectors:

1）x.oneclass 等價於 x[class='oneclass']

2）.oneclass 等價於 [class='oneclass']

3）x#oneid 等價於 x[id='oneid']

4）#oneid 等價於 [id='oneid']

5）x％oneref 表示具有 th:ref =“oneref” 或 th:fragment =“oneref” 屬性的 <x> 標籤

6）％oneref 表示具有 th:ref =“oneref” 或 th:fragment =“oneref” 屬性的任何標籤，注意，這實際上等同於簡單的oneref，因為可以使⽤引⽤⽽不是元素名稱

7）直接選擇器和屬性選擇器可以混合使⽤：a.external[@href ^='https']

-------------公共頁面-------------------------
<!--定義公共的頭部，commonHeader 為模板片段名稱-->
<header th:fragment="commonHeader">
    <h2>護龍山莊3</h2>
</header>

-------------引用頁面-------------------------
<!--定義公共的頭部，commonHeader 為模板片段名稱-->
<header th:replace="commons/commons::%commonHeader"></header>
//實際中通常不會多此一舉加上 %，而是直接省略如下
<header th:replace="commons/commons::commonHeader"></header>

多值類匹配

標記選擇器將類屬性理解為多值，因此即使該元素具有多個類值，也允許在該屬性上應⽤選擇器。
例如，div.two 將匹配上 <div class =“one two three”/> 標籤。即只要元素包含了 two 類屬性值，則都會匹配上。

----------------------公共頁面------------------------
<!--定義公共的頭部，commonHeader 為模板片段名稱-->
<header th:fragment="commonHeader" class="one tow three">
    <h2>護龍山莊0</h2>
</header>

----------------------引用頁面------------------------
<header th:replace="commons/commons::[class='tow']"></header>