一文带你快速了解常用的CSS选择器场景_css+选择没有+disabed-优快云博客

本文链接：https://blog.youkuaiyun.com/josiah_zhao/article/details/123868837

本文详细介绍了11种常见的CSS选择器应用场景，包括:first-child、:not、:nth-child、Child_combinator、Attribute_selectors等，帮助读者深入理解并掌握CSS选择器的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

说明

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

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

<ul>
  <li></li> ⭐
  <li></li>
  <li></li>
</ul>

实现

li:first-child

参考语法说明

CSS/:first-child

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

<div>
  <p></p> ⭐
  <p class="foo"></p>
  <p></p> ⭐
  <p></p> ⭐
</div>

实现

p:not(.foo)

参考语法说明

CSS/:not

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

<ul>
  <li></li>
  <li></li>
  <li></li>⭐
  <li></li>
  <li></li>⭐
  <li></li>
  <li></li>⭐
</ul>

实现

li:nth-child(2n+3)

参考语法说明

CSS/:nth-child

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

<div>
  <span></span>⭐
  <p>          ⭐
    <a></a>
    <span></span>
  </p>
</div>

实现

div > *

参考语法说明

CSS/Child_combinator

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

<div>
  <span data-item="foo"></span>  ⭐
  <span></span>
  <div>
    <span></span>
    <span data-item="bar"></span>⭐
    <span></span>
  </div>
</div>

实现

span[data-item]

参考语法说明

CSS/Attribute_selectors

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

<div>
  <span></span>
  <code></code>
  <span></span>
  <p></p>
  <span></span>⭐
  <span></span>⭐
  <p></p>
  <code></code>⭐
  <span></span>⭐
  <p></p>
</div>

实现

p ~ span

参考语法说明

CSS/General_sibling_combinator

7 选择所有不是disabled的元素

<form>
  <input />        ⭐
  <input disabled />
  <input />        ⭐
  <input />        ⭐
  <button disabled></button>
  <button></button>⭐
</form>

实现

:enabled

参考语法说明

CSS/:enabled

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

<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>

实现

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

参考语法说明

CSS/Selector_list

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

<div>
  <span></span>
  <p>
    <a></a>
    <span></span>⭐
  </p>
  <p>
    <span></span>
    <a></a>
    <span></span>⭐
    <span></span>
  </p>
  <a></a>
  <span></span>  ⭐
</div>

实现

a + span

参考语法说明

CSS/Adjacent_sibling_combinator

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

<div id="foo">
  <div class="foo"></div>⭐
  <div></div>
  <div>
    <div class="foo"></div>
    <div></div>
  </div>
  <div class="foo"></div>⭐
</div>

实现

#foo > .foo

参考语法说明

CSS/Child_combinator

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

<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>