CSS selector 小知识学习分享
qiyuwang 2025-05-16 15:45 2 浏览 0 评论
在设计器中，大家拾取网页元素后，在右侧的属性栏里都会有一个叫“查找路径”的选择框，一般也很少有人用到，打开后里面显示了一堆‘@ #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 选择器表供大家参考
更多资料大家可以在网上找哦，其实我也是初学者，也在不断地学习。
各位同学有好的相关知识也赶紧分享出来哈！
相关推荐
- 你们想要的Python爬虫教程来了:从原理到实践
-
概述：网络世界的智能采集者Python爬虫是通过自动化程序模拟人类浏览网页行为的技术工具，其核心价值在于高效获取并解析网络数据。得益于Python丰富的第三方库（如requests、Beautiful...
- 你需要知道的 19 个 console 实用调试技巧
-
大家好，我是Echa。之前给大家介绍了《...
- CSS布局必备技能
-
Flex是一种用于布局的CSS属性，它使得在容器中的子元素能够灵活地伸缩和排列，从而实现更加自适应和响应式的布局。使用Flex布局可以轻松地创建各种复杂的布局，而无需使用复杂的CSS或者...
- jsoup Selector类学习笔记，快速提升你的HTML处理能力!
-
Selector类是jsoup库中的一个核心类，用于通过CSS选择器语法来查找HTML文档中的元素。选择器语法通用选择器*：匹配任何元素。标签选择器tag：匹配指定标签名的元素。...
- CSS伪类选择器大全:提升网页交互与样式的神奇工具
-
CSS伪类选择器是前端开发中不可或缺的强大工具，它们允许我们根据元素的状态、位置或用户行为动态地应用样式。本文将全面介绍常用的伪类选择器，并通过代码示例展示其实际应用场景。一、基础交互伪类1.超链接...
- 简析JS中Document与CSS
-
如果你是一名前端人员，你单单的使用jq插件显然不够，js在大多时候比较搁置，但你如果前端技术想要提升，那么js的精通对你显得很重要，本文只是他到js的document与css。1.Document与E...
- 网页世界隐藏的神秘代码语言，竟能这样改变布局
-
CSS基础：选择器与属性CSS（CascadingStyleSheets）是用于控制网页外观的一门样式表语言。它通过定义HTML元素的显示方式来增强网页的表现力。CSS的选择器允许开发者精确地定位...
- Thymeleaf 语法全面详解(史上最全)
-
Thymeleaf是一个现代化的服务器端Java模板引擎，支持HTML、XML、JavaScript、CSS甚至纯文本。以下是Thymeleaf语法的全面详解，包含所有属性和复杂用法。...
- 零基础学习HTML之CSS篇内联内部外部样式表和类型选择符
-
CSS简介CSS(CascadingStyleSheets)层叠样式表。CSS能做些什么？1.使用CSS样式可以有效地对页面进行布局。2.使用CSS样式可以对页面字体、颜色、背景和其他效果实现...
- css 设置盒子阴影，阴影和背景图保持一致
-
预览图首先查看预览图:原理采用了background属性...
- CSS中的定位(postion)详解
-
定义CSSposition属性用于指定一个元素在文档中的定位方式。top，right，bottom和left属性则决定了该元素的最终位置，z-index属性则决定了该元素所在的层级。定位类型1...
- CSS selector 小知识学习分享
-
在设计器中，大家拾取网页元素后，在右侧的属性栏里都会有一个叫“查找路径”的选择框，一般也很少有人用到，打开后里面显示了一堆‘@#yen#%#yen@*T&’的玩意，那么这个“查找路径”到底是个什...
- 从网站检查中复制CSS代码的最简单方法
-
在处理网站项目时，您是否曾经对使用开发工具感到沮丧？必须在您正在处理的网页和检查器之间来回切换以查看CSS并进行调整通常可能是一个挑战。值得庆幸的是，有一个浏览器扩展程序可以简化该过程：CSSSca...
- XPath 选择器
-
上篇《Selenium入门（基于Python）...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- navicat无法连接mysql服务器 (65)
- 下横线怎么打 (71)
- flash插件怎么安装 (60)
- lol体验服怎么进 (66)
- ae插件怎么安装 (62)
- yum卸载 (75)
- .key文件 (63)
- cad一打开就致命错误是怎么回事 (61)
- rpm文件怎么安装 (66)
- linux取消挂载 (81)
- ie代理配置错误 (61)
- ajax error (67)
- centos7 重启网络 (67)
- centos6下载 (58)
- mysql 外网访问权限 (69)
- centos查看内核版本 (61)
- ps错误16 (66)
- nodejs读取json文件 (64)
- centos7 1810 (59)
- 加载com加载项时运行错误 (67)
- php打乱数组顺序 (68)
- cad安装失败怎么解决 (58)
- 因文件头错误而不能打开怎么解决 (68)
- js判断字符串为空 (62)
- centos查看端口 (64)