一文带你快速了解常用的CSS选择器场景
说明
近期做了一个小测验，上面设计的题目能够覆盖较多的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>
实现
div div span + code:not(.foo)
参考语法说明
CSS/CSS_Selectors
一文带你快速了解常用的CSS选择器场景相关推荐
- 最常用的css选择器及兼容性 +几个好用却不多见的 nth-child等
你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领 ...
- 一文带你快速入门【哈希表】
最近开始学习哈希表,为此特写一遍文章介绍一下哈希表,带大家快速入门哈希表
- 计算机网络要点归纳（一文带你快速掌握网络知识）
计算机网络(谢希仁版) 可以用来期末复习,也可以用来回顾自测,发现好多都设计的网络相关的的内容,一起回顾学习吧 第一章概述 计算机网络的性能指标: 速率 比特为单位 Kb/s(K=10^3) Mb/S ...
- 设计中最常用的CSS选择器
准确而简洁的运用CSS选择器会达到非常好的效果.我们不必通篇给每一个元素定义类(class)或ID,通过合适的组织,可以用最简单的方法实现同样的效果.在实际工作中,最常用的选择器有以下五类: 一.标签 ...
- 网关是什么，一文带你快速入门腾讯技术工程
今天来开门见山地讲讲网关是一个怎么样的组件,网关在做什么事情.网关这个词其实到处都在用,它可以工作在硬件层面,也可以工作在网络层,还可以工作在应用层. 网关快速入门 网关在做什么? 我们今天讲的实际上 ...
- 一文带你快速拆解云智慧前端技术架构
主讲人:王海虎,云智慧/智能研究院/算法工程经理 讲师简介:6年开发经验,主攻可视化方向.3d引擎.视野分析方向.18年开始做可视化方向,从前端工程师做到开发经理:开源项目FlyFish的负责人(荣获 ...
- Spring是什么？一文带你快速入门Spring
文章目录 前言 Spring是啥?它有啥好处 Spring体系结构详解 Spring目录结构和基础JAR包介绍 Spring IOC容器:BeanFactory和ApplicationContext ...
- 一文带你快速了解 Java 线上问题快速诊断神器 Arthas
文章目录 一.什么是 Arthas 二.特性一览 三.Arthas 能为你做什么? 四.快速安装 1.前提条件 2.一键安装 五.快速使用 1.启动脚本并连接进程 2.启动 jar 包并连接进程 六. ...
- 一文带你快速上手正则表达式
正则表达式简介 正则表达式在从文本,代码,日志文件,电子表格甚至文档中提取信息时非常有用.尽管形式语言背后有很多理论,但以下教程将探索正则表达式的更实际用法,以便可以尽快使用它们. 使用正则表达式时要 ...
最新文章
- mysql mgr应用场景_悄悄告诉你 MySQL MGR 牛在哪?
- java 最近将工作中用到的工具总结——日期工具
- [SDOI2017]数字表格
- GM6 frontend Shell._resolveHashFragment when tile is clicked
- 乐飞天下python笔试题_滴滴2020年春招笔试题分析(Python)
- dagger2 备注
- 了解一个新技术和技术点的时候需要了解的事情
- linux 查看硬盘序号,Linux 查看硬盘序列号 命令
- [Photography] 还是DPP好！
- [bzoj3887][Usaco2015 Jan]Grass Cownoisseur_trajan_拓扑排序_拓扑序dp
- Maven实战_许晓斌
- 千寻位置48小时“复活”伽利略卫星定位系统
- 杂牌蓝牙在2003系统使用新驱动的破解方法！
- 最速降线问题公式推导
- [ExtJS] 颜色选择器2.0
- 云耀服务器 NumPy安装 完整过程
- 王者荣耀是用什么编程语言开发的？
- javascript字符串匹配正则表达式方法
- 【多校训练】2021牛客多校第二场
- oracle手动挂载crs盘,手动清除CRS信息