在网页里找东西，网页操作中的selector入门

Dancy的纸飞机

于 2025-03-31 13:18:05 发布

阅读量1.5k

点赞数 26

CC 4.0 BY-SA版权

文章标签：浏览器插件前端前端选择器网页表单填写自动录入工具

本文链接：https://blog.youkuaiyun.com/Dancy924/article/details/146814533

一、基础入门

1、什么是HTML？

HTML就是网页的基础结构，简单理解，可以把它当作是一个房子。

HTML里有各种各种的元素，常见的有以下几种：

<p>表示段落（paragraph）

<img>表示图片（image）

<a>表示链接（anchor）

<div>表示板块（division）

<select>表示下拉选框

<input>表示输入框

可以理解成房子里的房间或者家具。

2、什么是CSS？

CSS是网页的样式，简单理解，可以把它当作房子的装修风格。

h2｛color：red｝标题文字颜色是红色

p｛font-size：16px｝段落的字体大小为16个像素

3、HTML+CSS

两个结合起来，就形成了网页基础。HTML用来定义网页里有那些东西，CSS用来描述这些东西是什么样子的。HTML就比如一个房子，是三室一厅的结构，其中客厅有沙发、卧室有床；CSS描述了，客厅的沙发是白色、卧室的床是2米宽。

/**
* 一个叫house的房子，里面有三个房间div，这三个div房间的class类型都是box，背景色都是green。其中客厅里面有沙发，颜色color是白色，卧室的床宽度是15px
*/
<style>
#house {height: 30px; width:100px}
div .box {background-color:green}
.couch {color：white; width:50px}
.bed {width:15px}
</style>

<div id="house">
    <div  class="box">客厅
        <p id="couch">沙发</p>
    </div>
  <div class="box">餐厅</div>
  <div class="box">卧室
    <p class="bed">床</p>
  </div>
</div>

ps：还有个东西叫js，javascript。js是在网页上用来执行的代码，控制网页上的内容如何变化。用房子的概念去理解，当你走进了厕所、站在马桶前，马桶盖自动打开，就是js来控制的。

HTML+CSS+JS，就是前端基础了。

4、怎么使用css定位元素

假设有这样一个“房子”，里面放了p、a这些“家具”。如何找到对应的元素呢？

常见的CSS选择器

1、标签选择器

这是最简单的选择器，直接观察html的标签即可作出选择，如

p 选择p标签

div p 选择div里面的p

2、类选择器

用来选择有相同类的元素，一般情况下，一个元素会有一个class，可以通过这个属性进行定位，它的关键符合是.

.box 选择class中带有box的元素

3、ID选择器

跟类选择器相似，一个元素如果带有id，则可以用ID选择器定位，它的关键符合是#号，一个元素只有一个id

#main 选择ID是main的元素

4、组合选择器

即把不同的选择方式组合起来使用，用于更加精准的定位，先看看以下代码

<div id="house">
    <div class="box">客厅
        <p class="furniture" id="couch">沙发</p>
        <p class="furniture" id="chair">凳子</p>
    </div>
  <div class="box">餐厅</div>
  <div class="box">卧室
    <p id="bed">床
        <a class="furniture" id="pillow">枕头</a>
    </p>
  </div>
</div>

div.box #chair 选择div标签并带有box这种class的所有元素，并在其中查找id=chair的元素，即查找到<p id="chair">凳子</p>

注意空格的位置，空格表示向下查找，找下面的所有后代元素，如：

div#couch 查找id=couch的p元素，返回值是空，因为没有id=couch的div元素

div #bed 查找div元素下面的id=bed的元素，返回值是 <p id="bed">床</p>

div .box 查找div元素下面的class=box的所有元素，返回值是“ 客厅 ”、“ 餐厅 ”、“ 卧室 ”这个三个元素

另外，还有一种情况也是经常遇到，就是>符号，也表示向下查找，不过查找的范围，仅查找当前节点下的子元素，不包括子元素的子元素。

如：

div.box > .furniture 查找class=box的div元素下面的子元素里包含class=furniture的元素，返回值是“沙发”、“凳子”这两个元素

div.box .furniture 查找class=box的div元素下面的所有后代元素里包含class=furniture的元素，返回“沙发”、“凳子”、“枕头”这三个元素

5、伪类选择器

也可以理解成元素的状态选择器，关键符号是:号

a:hover 选取鼠标停留位置的a标签元素

div:nth-child(2) 在所有的div中取第二个

二、实战操作

以若依框架演示平台的若依管理系统为例，登录平台后，点击【系统管理-用户管理】，在页面点击“+新增”按钮，接下来看看如何获取到“用户昵称”这个输入框的selector

方案一：自己编写selector表达式

第一步：打开浏览器的元素审查工具

在“请输出用户昵称”这个选择框上，右键，选择“检查”选项，浏览器会弹出工具栏，并高亮显示选择的元素

第二步：查看并分析元素，组装selector表达式

浏览器会高亮我们选择的元素，可以看到这个输入框元素的html结构为

则可以按照选择器的写法，使用以下表达式确定元素：

input[type="text"][placeholder="请输入用户昵称"].el-input__inner

其中：

input是标签

[type="text"]和[placeholder="请输入用户昵称"]，用[]围了起来，表示这个元素的属性

.el-input__inner表示取的是元素的class，符号.是取class的简化写法，也可以用[class="el-input__inner"]

第三步（可选）：验证取值

在浏览器的console里，输入document.querySelector('input[type="text"][placeholder="请输入用户昵称"].el-input__inner')，回车后会打印出所选择到的元素，鼠标移上去后，浏览器会高亮显示选中的页面元素

方案二：直接通过浏览器获取selector

也有一种更简单的方法，可以在浏览器的html元素上，直接右键，在弹出的选项中选择“copy->copy selector”，再粘贴到文本框，这样也能得到浏览器帮你计算出来的selector。

如下，通过这种方法获取到的selector为

body > div.el-dialog__wrapper > div > div.el-dialog__body > form > div:nth-child(1) > div:nth-child(1) > div > div > div.el-input.el-input--medium > input

注意事项：

1、这种方法相对简单，组装出来的selector是相对于整个页面的绝对定位；

2、对于现代常用vue、react或一些动态页面，取到的selector不一定全部适用，因为这些网页是动态生成的，有些元素可能在div的第8个位置，点击某个按钮后，会变成第9个位置