常用的CSS选择器场景
发表于更新于
阅读量: 北京
前端CSS常用的CSS选择器场景
赵洲洋说明
近期做了一个小测验,上面设计的题目能够覆盖较多的CSS选择器的场景,特此将其总结记录出来可以更直观的参考。
![](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
1 定位到ul元素中的第一个li元素
1 2 3 4 5
| <ul> <li></li> ⭐ <li></li> <li></li> </ul>
|
实现
参考语法说明
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>
|
实现
参考语法说明
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>
|
实现
参考语法说明
CSS/:nth-child
4 选取div元素中的所有直接child元素
1 2 3 4 5 6 7
| <div> <span></span>⭐ <p> ⭐ <a></a> <span></span> </p> </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>
|
实现
参考语法说明
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>
|
实现
参考语法说明
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>
|
实现
参考语法说明
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>
|
实现
参考语法说明
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>
|
实现
参考语法说明
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