如何用浏览器获取css选择器的路径

最新推荐文章于 2024-07-08 16:10:56 发布
最新推荐文章于 2024-07-08 16:10:56 发布
阅读量2.2k 收藏 5
点赞数 1
分类专栏： 小技巧 文章标签： html js css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44251163/article/details/111644679
版权

如何用浏览器获取css选择器的路径

1、使用浏览器打开网址，右键点击“检查”或通过快捷键f12（有的机器需要同时按下fn键）
在这里插入图片描述
2、点击控制台的左上角的鼠标样式的按钮，对网页中的内容（这里是点击了热榜的第19条标题），点击后会自动选中相应的html代码
在这里插入图片描述

3、右键选中的代码，选择复制css选择器，就大功告成了
在这里插入图片描述

我的Y同学
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
网页内容抓取分析---简单CSS选择器学习
天生我才必有用
01-14 1303
Css 选择器 创建爬虫，分析目标网页内容，可以通过xpath方法，或者Css选择器的方法。以下介绍常用的Css选择器使用方法 表达式 说明 时间 * 选择所有节点 # container 选择id为container的节点元素 .container 选取所有class包含container的节点元素 li a
根据html生成css工具,html – Chrome开发工具如何生成CSS选择器？
weixin_34577766的博客
06-09 212
除非我查看源代码本身,否则无法对浏览器的实现进行精确分析.但我可以说,浏览器需要确保您添加的样式规则仅适用于工作DOM中的特定元素,而目的是将一个或多个相关元素分组的类不是很好 – 适合这个目的.由于类的工作方式,浏览器不能假定您的类仅分配给该span元素,因为它不知道您如何编写HTML. NichoDiaz给出的例子说明了一个简单但有效的例子：a .helper可能不一定是一个身体> di...
前端知识路径之常用css选择器
win0032的博客
11-24 617
css选择器
Nulli-Chrome-Extension:Chrome扩展程序。 将自定义CSSJS应用于特定网站。 使用选择器工具可帮助快速生成CSS规则。 可能是我将要打造的最酷的Chrome扩展程序，因采用率低而被除名
05-21
Nulli Chrome扩展程序 官方的 chrome扩展程序。 javascript和CSS引擎的插件，可帮助用户将规则应用于网站。 正在安装 要下载公共版本，请使用上面的链接。 要访问开发版本，请下载或克隆此代码，然后将其作为解压缩的扩展程序加载。 源代码： 拆包扩展 如果您下载了代码，则将文件解压缩。 打开（chrome：// extensions /）或选择菜单Window > Extensions 。 启用右上方的开发者模式。 单击Load unpacked extension...然后选择源代码文件夹。 功能/说明 创建规则配置文件以有条件地在网站上加载js 创建规则配置文件以有条件地在网站上加载CSS 使用字符串URL搜索来确定规则部署 问题和功能要求 请让我们知道：。 贡献 分叉，进行更改，创建请求请求！
CSS选择器
dk123sw的博客
03-08 293
（好吧，直接跑后面代码看注解来了解最简单）选择器类选择器（Class selectors）通过设置元素的 class 属性，可以为元素指定类名。类名由开发者自己指定。文档中的多个元素可以拥有同一个类名。在写样式表时，类选择器是以英文句号（.）开头的。ID选择器（ID selectors）通过设置元素的 id 属性为该元素制定ID。ID名由开发者指定。每个ID在文档中必须是唯一的。在写样式表时，ID...
js找css选择器,js 实现css风格选择器（压缩后2KB）
weixin_32705179的博客
08-04 199
近日在做一些OA前端界面，为了更好管理页面代码想写个js选择器，写着写着发现很费力，索性在网上找找看，功夫不负有心人， 找到一个mini css选择器，且性能不凡：以下代码是压缩后的，仅2KB。var $=(function(){var b=/(?:[\w\-\\.#]+)+(?:\[\w+?=([\'"])?(?:\\\1|.)+?\1\])?|\*|>/ig,g=/^(?:[\w\-_]...
chrome动态修改html文件路径,CSS+文件路径+chrome
weixin_33549415的博客
06-04 450
**关键字: **css文件路径html和 css 的书写规范chrome 开发者工具CSS的全称是什么?CSS全称是 Cascading Style Sheets, 层叠样式表CSS有几种引入方式? link 和@import 有什么区别?内联样式内部样式h1 {color: red;font-size: 20px;}xxx```外部样式@import url("hello.css");@imp...
如何获取指定元素的CSS选择器
maggie_1212的博客
06-29 1916
（1）随便打开一个网页，如 百度 。 （2）按 F12 进入调试模式。 （3）点击元素选择模式。 （4）选择一个元素，如输入框，会看到元素调试器元素框中所选元素高亮。 （5）右键点击该元素，选择Copy>Copy selector，即可获得该元素的CSS选择器。 （6）粘贴到需要的地方，本次选择的输入框的对应代码为：#kw ...
高效的CSS选择器编写指南
12-13
CSS选择器的正确使用能够提高页面加载速度，提升用户体验。以下是一些关于CSS选择器效率和编写技巧的详细解释。 1. **选择器类型及其效率** - **ID选择器**: 例如`#header`，ID选择器具有最高的特异性，因此查找...
SelectorGadget CSS选择器
05-27
SelectorGadget是一款强大的浏览器插件，专为网页开发者和设计师设计，主要功能是自动化生成CSS选择器。在网页开发过程中，我们经常需要精确地定位HTML元素以便进行样式修改或JavaScript操作，而SelectorGadget则能...
jquery 导航条的效果(css选择器控制)
12-12
本篇文章将重点讲解如何使用 `jQuery` 和 `CSS` 选择器来实现一个导航条的效果。 首先，我们看到描述中提到了一些基本的 `CSS` 样式，这些样式用于定义导航条的基本外观。`.m1` 到 `.m6` 是类选择器，它们分别对应...
获取网页上 xpath , css 路径的插件， 方便爬虫、自动化测试相关软件工作者快速获取页面上html元素路径
11-12
在IT行业中，尤其是在网页爬虫和自动化测试领域，获取网页上的XPath和CSS选择器路径是一项基本且重要的技能。XPath和CSS选择器是两种常见的定位HTML元素的方法，它们被广泛用于网页抓取、网页自动化和测试工具中。这...
css选择器获取文本,有没有办法从CSS选择器中获取特定的文本？
weixin_31523667的博客
08-04 1357
解决方案1与其使用text，不如使用innerHTML。这将返回该元素的html代码，包括文本！你知道吗例如，它将返回您："$19999"然后您可以使用regex库re只获取中间的值。你知道吗print(re.search('\d+', upfrontCost).group(0))输出：199下面是执行此操作的代码：from selenium.webdriver import Chromefrom...
为什么CSS选择器是从右往左解析
热门推荐
08-05 1万+
一、CSS选择器的解析顺序相信很多人在一开始接触CSS的时候都会看到一条规则就是尽量少使用层级关系，比如尽量不要写成：#div P.class { color: red; }而是写成：.class { color: red; }之所以需要这么写，给的解释是这样可以减少选择器匹配的次数（推荐一个CSS规范的网站）。初看觉得哦，有点道理啊，但是往细了再想想：如果我把层级定的足够的清晰分明
html中css路径和xpath路径,xpath路径表达式与css选择器
weixin_28543661的博客
06-28 933
1、xpath路径表达式1.1、什么是Xpath路径表达式：Xpath即为XML路径语言，它是一种用来(标准通用标记语言的子集)在 HTMLXML 文档中查找信息的语言xpath路径表达式用来在一个web页面中定位、查找元素在自动化测试里，我们只需要知道Xpath是一种元素定位方式即可：xpath使用路径表达式来选取XML/HTML文档中的节点或节点集，这些路径表达式和我们在常规的电脑文件系统中看...
浏览器解析css选择器的规则
_陌默
06-06 5086
浏览器解析css选择器的规则是从右向左的，这样会提高查找选择器所对应的元素的效率。 中国人有一个习惯，不论干什么，潜意识中的顺序都是从左到右，从上到下，从大到下，因此大多数人看到这个顺序都会感到很不适应，但大家要记得我们这是一个程序，而程序是用来干什么的？运行。因此它的第一要领是必须效率高，因此所谓的习惯我们就先抛到九霄云外去。 至于具体分析如下（个人理解）： 1.html片段如下
UI自动化测试（二）浏览器操作及对元素的定位方法（xpath定位和css定位详解）...
weixin_30394669的博客
10-03 977
Selenium下的Webdriver工具支持FireFox(geckodriver)、 IE(InternetExplorerDriver)、Chrome(ChromeDriver)、 Opera(OperaDriver)， 它还支持AndriodDriver和Iphone(IphoneDriver)的移动应用测试。 而做测试的主流三款浏览器：Chrome、Firefox和IE，今天就介绍下，...
通过谷歌浏览器的开发者工具F12查找元素的xpath与CSS地址
AZ_Canon的博客
11-27 7277
打开谷歌浏览器，按F12打开开发者工具 1.选择element元素 2.点下工具窗右上角的小箭头 3.点击要定位的元素，如图中的“关注”，点击后元素栏自然会用亮色突出该元素信息 4.右击这行信息 5.选择copy 6.选择copy xpath ...
HTML最快速最简单
最新发布
07-08 299
HTML 元素以开始标签起始，HTML 元素以结束标签终止空元素在开始标签中进行关闭（以开始标签的结束而结束）元素的内容是开始标签与结束标签之间的内容。
js获取元素dom定位路径
04-26
你可以使用以下方法获取元素DOM定位路径： 1. 使用浏览器开发者工具：在浏览器中打开页面，右键点击要查找的元素，选择“检查”或“审查元素”，可以打开浏览器的开发者工具，工具面板中会显示该元素的DOM结构，可以通过查看DOM结构来确定元素的定位路径。 2. 使用JavaScript代码：可以使用JavaScript代码来获取元素的定位路径。例如，使用以下代码可以获取当前元素的XPath路径： ``` function getXPath(element) { if (element.id !== '') { return 'id("' + element.id + '")'; } if (element === document.body) { return element.tagName.toLowerCase(); } var ix = 0; var siblings = element.parentNode.childNodes; for (var i = 0; i < siblings.length; i++) { var sibling = siblings[i]; if (sibling === element) { return getXPath(element.parentNode) + '/' + element.tagName.toLowerCase() + '[' + (ix + 1) + ']'; } if (sibling.nodeType === 1 && sibling.tagName === element.tagName) { ix++; } } } ``` 使用该函数可以获取元素的XPath路径，例如： ``` var element = document.getElementById('myElement'); var xpath = getXPath(element); console.log(xpath); ``` 3. 使用CSS选择器：可以使用CSS选择器来获取元素的定位路径。例如，使用以下代码可以获取当前元素的CSS选择器路径： ``` function getCssSelector(element) { if (!(element instanceof Element)) return; var path = []; while (element.nodeType === Node.ELEMENT_NODE) { var selector = element.nodeName.toLowerCase(); if (element.id) { selector += '#' + element.id; path.unshift(selector); break; } else { var sib = element, nth = 1; while (sib.nodeType === Node.ELEMENT_NODE && (sib = sib.previousSibling) && nth++); selector += ':nth-child(' + nth + ')'; } path.unshift(selector); element = element.parentNode; } return path.join(' > '); } ``` 使用该函数可以获取元素的CSS选择器路径，例如： ``` var element = document.getElementById('myElement'); var cssSelector = getCssSelector(element); console.log(cssSelector); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我的Y同学

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值