AImager

属性选择

/* title属性值里含有"name"单词的元素,单词按空格分割 */
[title~=name]

/* title属性值里含有"name"字符串的元素 */
[title*=name]

/* target属性等于"_blank"的元素 */
[target=_blank]

子元素

/* .menu-main后代元素里,若某li元素是其父元素的第2个子元素,则筛选出来 */
.menu-main li:nth-child(2)

/* .menu-main后代元素里,若某li元素是其父元素的第2个li子元素,则筛选出来 */
.menu-main li:nth-of-type(2)

nth-child/first-child等伪选择器修饰的元素至少是二级元素,如果前面还有父选择器,则至少是父选择器筛选后的二级元素。针对以下例子,如果想选择li-1/4/7/10,使用.a li:first-child,如果想选择li-1/4/7,使用.a .first li:first-child

<div class = 'a'>
  <div class = 'first'>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <ul>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
    <ul>
      <li>7</li>
      <li>8</li>
      <li>9</li>
    </ul>
  </div>
  <div class = 'second'>
    <li>10</li>
    <li>11</li>
    <li>12</li>
  </div>
</div>

参考链接