By

文章目录
  1. 1. 元素
    1. 1.0.1. 1、div 元素 按下div+table试一试吧
    2. 1.0.2. 2、div>ul 子元素>
    3. 1.0.3. 3、div+ul 同级元素+
    4. 1.0.4. 4、div+div>p>span^em 向上^
    5. 1.0.5. 5、ul>li*5 元素输出次数
    6. 1.0.6. 6、div>(header>ul>li*2>a)+footer>p grouping
  • 2. 属性运算符
    1. 2.0.1. 1、div#id
    2. 2.0.2. 2、div.class
  • 3. 自定义运算符
    1. 3.0.1. 1、div[title=’helloworld’]
    2. 3.0.2. 2、div[title self]
  • 4. 编号 $
    1. 4.0.1. 1、li.item$*5
    2. 4.0.2. 2、ul>li.item$$$*5
    3. 4.0.3. 3、ul>li.item$@-*5
    4. 4.0.4. 4、ul>li.item$@3*5
    5. 4.0.5. 5、ul>li.item$@-3*5
  • 5. 文本{}
    1. 5.0.1. 1、简单文本
    2. 5.0.2. 2、如下所示
    3. 5.0.3. 3、如下所示
    4. 5.0.4. 4、如下所示

    • 先来看张图，不得不说很强

    元素

    1、div 元素 按下div+table试一试吧

    1
    <div></div>

    2、div>ul 子元素>

    1
    2
    3
    4
    5
    <div>

    <ul></ul>

    </div>

    3、div+ul 同级元素+

    1
    2
    3
    <div></div>

    <ul></ul>

    4、div+div>p>span^em 向上^

    1
    2
    3
    4
    5
    6
    7
    <div>

    <p><span></span></p>

    <em></em>

    </div>

    5、ul>li*5 元素输出次数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <ul>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    </ul>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <div>

    <header>

    <ul>

    <li><a href=""></a></li>

    <li><a href=""></a></li>

    </ul>

    </header>

    <footer>

    <p></p>

    </footer>

    </div>

    ####6.2 如下输出

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    (div>dl>(dt+dd)*3)+footer>p

    <div>

    <dl>

    <dt></dt>

    <dd></dd>

    <dt></dt>

    <dd></dd>

    <dt></dt>

    <dd></dd>

    </dl>

    </div>

    <footer>

    <p></p>

    </footer>

    • 使用组 你可以写下整页的标记 请不要这样做 官方给的建议 你可以尝试

    属性运算符

    1、div#id

    1
    <div id="id"></div>

    2、div.class

    1
    <div class="class"></div>

    自定义运算符

    1、div[title=’helloworld’]

    1
    <div title="helloworld"></div>

    2、div[title self]

    1
    <div title="" self=""></div>

    编号 $

    1、li.item$*5

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <ul>

    <li class="item1"></li>

    <li class="item2"></li>

    <li class="item3"></li>

    <li class="item4"></li>

    <li class="item5"></li>

    </ul>

    2、ul>li.item$$$*5

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <ul>

    <li class="item001"></li>

    <li class="item002"></li>

    <li class="item003"></li>

    <li class="item004"></li>

    <li class="item005"></li>

    </ul>

    3、ul>li.item$@-*5

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <ul>

    <li class="item5"></li>

    <li class="item4"></li>

    <li class="item3"></li>

    <li class="item2"></li>

    <li class="item1"></li>

    </ul>

    4、ul>li.item$@3*5

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <ul>

    <li class="item3"></li>

    <li class="item4"></li>

    <li class="item5"></li>

    <li class="item6"></li>

    <li class="item7"></li>

    </ul>

    5、ul>li.item$@-3*5

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <ul>

    <li class="item7"></li>

    <li class="item6"></li>

    <li class="item5"></li>

    <li class="item4"></li>

    <li class="item3"></li>

    </ul>

    文本{}

    1、简单文本

    1
    <div>cs</div>

    2、如下所示

    1
    2
    3
    a{click}+b{here}

    <a href="">click</a><b>here</b>

    3、如下所示

    1
    2
    3
    a>{click}+b{here}

    <a href="">click<b>here</b></a>

    4、如下所示

    1
    2
    3
    p>{Click }+a{here}+{ to continue}

    <p>Click <a href="">here</a> to continue</p>
    文章目录
    1. 1. 元素
      1. 1.0.1. 1、div 元素 按下div+table试一试吧
      2. 1.0.2. 2、div>ul 子元素>
      3. 1.0.3. 3、div+ul 同级元素+
      4. 1.0.4. 4、div+div>p>span^em 向上^
      5. 1.0.5. 5、ul>li*5 元素输出次数
      6. 1.0.6. 6、div>(header>ul>li*2>a)+footer>p grouping
  • 2. 属性运算符
    1. 2.0.1. 1、div#id
    2. 2.0.2. 2、div.class
  • 3. 自定义运算符
    1. 3.0.1. 1、div[title=’helloworld’]
    2. 3.0.2. 2、div[title self]
  • 4. 编号 $
    1. 4.0.1. 1、li.item$*5
    2. 4.0.2. 2、ul>li.item$$$*5
    3. 4.0.3. 3、ul>li.item$@-*5
    4. 4.0.4. 4、ul>li.item$@3*5
    5. 4.0.5. 5、ul>li.item$@-3*5
  • 5. 文本{}
    1. 5.0.1. 1、简单文本
    2. 5.0.2. 2、如下所示
    3. 5.0.3. 3、如下所示
    4. 5.0.4. 4、如下所示