<!-- 1 子节点 操作符 > -->
<!-- div>ul> li -->
<
div
>
<
ul
>
<
li
></
li
>
</
ul
>
</
div
>
<!-- 2 兄弟节点 操作符 + -->
<!-- div+p+div -->
<
div
></
div
>
<
p
></
p
>
<
div
></
div
>
<!-- 3 父节点 操作符 ^ (英文输入法下,Shift+6) -->
<!-- div+div> ul>li ^p -->
<
div
></
div
>
<
div
>
<
ul
>
<
li
></
li
>
</
ul
>
<
p
></
p
>
</
div
>
<!-- 4 多个相同兄弟节点 操作符 * -->
<!-- div>ul> li*3^p*2 -->
<
div
>
<
ul
>
<
li
></
li
>
<
li
></
li
>
<
li
></
li
>
</
ul
>
<
p
></
p
>
<
p
></
p
>
</
div
>
<!-- 5 分组 操作符 () -->
<!-- div>ul> li*3^^+div >ol>li*2^button -->
<
div
>
<
ul
>
<
li
></
li
>
<
li
></
li
>
<
li
></
li
>
</
ul
>
</
div
>
<
div
>
<
ol
>
<
li
></
li
>
<
li
></
li
>
</
ol
>
<
button
></
button
>
</
div
>
<!-- (div>ul> li*3)+(div >ol>li*2^button) -->
<
div
>
<
ul
>
<
li
></
li
>
<
li
></
li
>
<
li
></
li
>
</
ul
>
</
div
>
<
div
>
<
ol
>
<
li
></
li
>
<
li
></
li
>
</
ol
>
<
button
></
button
>
</
div
>
<!-- 6 ID 和 CLASS 操作符 # 和 . -->
<!-- (div#divTop>ul.ulFirst>li*3)+( div#divSecond>ol.olFirst>li*3) -->
<
div
id
=
"divTop"
>
<
ul
class
=
"ulFirst"
>
<
li
></
li
>
<
li
></
li
>
<
li
></
li
>
</
ul
>
</
div
>
<
div
id
=
"divSecond"
>
<
ol
class
=
"olFirst"
>
<
li
></
li
>
<
li
></
li
>
<
li
></
li
>
</
ol
>
</
div
>
<!-- 7 自定义属性操作符 [] -->
<!-- (div#nav >ul>li>img[user_data="my_face"])+(div.main>p)+(div.submitDiv.foot>form)^script -->
<
div
id
=
"nav"
>
<
ul
>
<
li
><
img
src
=
""
alt
=
""
user_data
=
"my_face"
/></
li
>
</
ul
>
</
div
>
<
div
class
=
"main"
>
<
p
></
p
>
</
div
>
<
div
class
=
"submitDiv foot"
>
<
form
action
=
""
></
form
>
</
div
>
<
script
></
script
>
<!-- 8 计数器 $ -->
<!-- div#loop_show>ul>li.img_$*5 -->
<
div
id
=
"loop_show"
>
<
ul
>
<
li
class
=
"img_1"
></
li
>
<
li
class
=
"img_2"
></
li
>
<
li
class
=
"img_3"
></
li
>
<
li
class
=
"img_4"
></
li
>
<
li
class
=
"img_5"
></
li
>
</
ul
>
</
div
>
<!-- div#loop_show>ul>li.img_$$*5 -->
<
div
id
=
"loop_show"
>
<
ul
>
<
li
class
=
"img_01"
></
li
>
<
li
class
=
"img_02"
></
li
>
<
li
class
=
"img_03"
></
li
>
<
li
class
=
"img_04"
></
li
>
<
li
class
=
"img_05"
></
li
>
</
ul
>
</
div
>
<!-- 9 文本内容 操作符 {} -->
<!-- div#loop_show>ol>li.img_${轮番图片$}*5 -->
<
div
id
=
"loop_show"
>
<
ol
>
<
li
class
=
"img_1"
>
轮番图片1
</
li
>
<
li
class
=
"img_2"
>
轮番图片2
</
li
>
<
li
class
=
"img_3"
>
轮番图片3
</
li
>
<
li
class
=
"img_4"
>
轮番图片4
</
li
>
<
li
class
=
"img_5"
>
轮番图片5
</
li
>
</
ol
>
</
div
>
<!-- ul>li.item$@-*5 倒序-->
<
ul
>
<
li
class
=
"item5"
></
li
>
<
li
class
=
"item4"
></
li
>
<
li
class
=
"item3"
></
li
>
<
li
class
=
"item2"
></
li
>
<
li
class
=
"item1"
></
li
>
</
ul
>
<!-- ul>li.item$@3*5 从指定数开始-->
<
ul
>
<
li
class
=
"item3"
></
li
>
<
li
class
=
"item4"
></
li
>
<
li
class
=
"item5"
></
li
>
<
li
class
=
"item6"
></
li
>
<
li
class
=
"item7"
></
li
>
</
ul
>
<!-- 10 关于空格 ,如果有空格,也需要使用""(双引号)进行包括 -->
div#divSpace> p.sp