常用的CSS选择器场景

说明

近期做了一个小测验，上面设计的题目能够覆盖较多的CSS选择器的场景，特此将其总结记录出来可以更直观的参考。

1 定位到ul元素中的第一个li元素

1
2
3
4
5
<ul>
  <li></li> ⭐
  <li></li>
  <li></li>
</ul>

实现

1
li:first-child

参考语法说明

CSS/:first-child

2 定位到div元素中没有class的p元素

1
2
3
4
5
6
<div>
  <p></p> ⭐
  <p class="foo"></p>
  <p></p> ⭐
  <p></p> ⭐
</div>

实现

1
p:not(.foo)

参考语法说明

CSS/:not

3 定位到ul元素中第3，5，7个li元素

1
2
3
4
5
6
7
8
9
<ul>
  <li></li>
  <li></li>
  <li></li>⭐
  <li></li>
  <li></li>⭐
  <li></li>
  <li></li>⭐
</ul>

实现

1
li:nth-child(2n+3)

参考语法说明

CSS/:nth-child

4 选取div元素中的所有直接child元素

1
2
3
4
5
6
7
<div>
  <span></span>⭐
  <p>          ⭐
    <a></a>
    <span></span>
  </p>
</div>

实现

1
div > *

参考语法说明

CSS/Child_combinator

5 选取所有有data-item属性的span元素

1
2
3
4
5
6
7
8
9
<div>
  <span data-item="foo"></span>  ⭐
  <span></span>
  <div>
    <span></span>
    <span data-item="bar"></span>⭐
    <span></span>
  </div>
</div>

实现

1
span[data-item]

参考语法说明

CSS/Attribute_selectors

6 选取所在p元素之后的span元素

1
2
3
4
5
6
7
8
9
10
11
12
<div>
  <span></span>
  <code></code>
  <span></span>
  <p></p>
  <span></span>⭐
  <span></span>⭐
  <p></p>
  <code></code>⭐
  <span></span>⭐
  <p></p>
</div>

实现

1
p ~ span

参考语法说明

CSS/General_sibling_combinator

7 选择所有不是disabled的元素

1
2
3
4
5
6
7
8
<form>
  <input />        ⭐
  <input disabled />
  <input />        ⭐
  <input />        ⭐
  <button disabled></button>
  <button></button>⭐
</form>

实现

1
:enabled

参考语法说明

CSS/:enabled

8 选择id是one，two，five，six，nine的元素

1
2
3
4
5
6
7
8
9
10
11
12
<ol>
  <li class="me" id="one"></li> ⭐
  <li class="you" id="two"></li>⭐
  <li class="me" id="three"></li>
  <li class="you" id="four"></li>
  <li class="me" id="five"></li>⭐
  <li class="you" id="six"></li>⭐
  <li class="me" id="seven"></li>
  <li class="you" id="eight"></li>
  <li class="me" id="nine"></li>⭐
  <li class="you" id="ten"></li>
</ol>

实现

1
#one, #two, #five, #six, #nine

参考语法说明

CSS/Selector_list

9 选择所有和a元素直接相邻的span元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div>
  <span></span>
  <p>
    <a></a>
    <span></span>⭐
  </p>
  <p>
    <span></span>
    <a></a>
    <span></span>⭐
    <span></span>
  </p>
  <a></a>
  <span></span>  ⭐
</div>

实现

1
a + span

参考语法说明

CSS/Adjacent_sibling_combinator

10 选择id=foo中所有class=foo的元素

1
2
3
4
5
6
7
8
9
<div id="foo">
  <div class="foo"></div>⭐
  <div></div>
  <div>
    <div class="foo"></div>
    <div></div>
  </div>
  <div class="foo"></div>⭐
</div>

实现

1
#foo > .foo

参考语法说明

CSS/Child_combinator

11 选择div中标记有⭐的code元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div>
  <div>
    <span></span>
    <code></code>⭐
  </div>
  <div>
    <code></code>
    <span></span>
    <code></code>⭐
  </div>
  <div>
    <span></span>
    <code class="foo"></code>
  </div>
  <span></span>
  <code></code>
</div>

实现

1
div div span + code:not(.foo)

参考语法说明

CSS/CSS_Selectors