CSS selector 小知识学习分享

zhezhongyun 2025-05-27 19:12 29 浏览

在设计器中，大家拾取网页元素后，在右侧的属性栏里都会有一个叫“查找路径”的选择框，一般也很少有人用到，打开后里面显示了一堆‘@ #yen#%#yen@ *T&’的玩意，那么这个“查找路径”到底是个什么呢？有何用途？

设计器中的“查找路径”中显示的其实就是 cssSelector，是一种常用的选择器。简而言之，可以理解为通过 cssSelector 定位到你需要找到的页面元素。当然，一个页面元素（比如本例中的百度按钮）肯定不止一种方式的 cssSelector，通过上图可以发现有好几个，那么这些代码具体分别代表什么意思，继续往下看！

首先，你需要学会
http://support.i-search.com.cn/article/1531101827667，IE 浏览器和 Chrome 都可以进行这种操作。

在selector中
# 表示id
. 表示class
> 表示子元素，层级

我们还是以上图的“百度按钮”为例，我们把“查找路径”中的代码复制出来，如下：

#su 表示选择 id 为 su 的节点
.bg s_btn btnhover 表示选择 class 为 bg s_btn btnhover 的节点
INPUT[id=su][class=bg s_btn btnhover][type=submit] 表示选择 id 为 su 且 class 为 bg s_btn btnhover 且 type 为 submit 的 input 节点
前 3 个 selector 还比较好理解，下面这第四个是什么鬼
body > DIV:nth-of-type(1) > DIV:nth-of-type(1) > DIV:nth-of-type(1) > DIV:nth-of-type(1) > DIV:nth-of-type(1) > FORM:nth-of-type(1) > SPAN:nth-of-type(2) > INPUT:nth-of-type(1)
别急，通过 IE 的开发者工具，我们来拾取一下看看结构，图如下：

通过图片可以看出，网页结构是一层一层的，括号后面的数字代表当前结构节点下的第几个子类，这样就可以和上面那段代码对应起来了吧。
同时在我们的设计器中，如果找到了这种规律，表示节点的数字是可以使用变量来代替的。

那么问题又来了，DIV:nth-of-type(1)、SPAN:nth-of-type(2)这又是什么鬼？
DIV:nth-of-type(1)表示选择 DIV 标签下的第 1 个节点
SPAN:nth-of-type(2)表示选择 SPAN 标签下的第 2 个节点

附上一张 selector 选择器表供大家参考
更多资料大家可以在网上找哦，其实我也是初学者，也在不断地学习。
各位同学有好的相关知识也赶紧分享出来哈！

CSS Positioning (定位)

上一篇：功能强大的卫星追踪软件推荐
下一篇：你不可不知道的Selenium 8种元素定位方法!简单且实用

CSS selector 小知识学习分享

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

接口测试遇到500报错?别慌，你的头部可能有点问题

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

现在页面实时聊天都使用Websocket技术实现吗?

关于HTML5被简称做H5，你怎么看?（html5缩写）