一、基础入门
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" autocomplete="off" placeholder="请输入用户昵称" maxlength="30" class="el-input__inner">
则可以按照选择器的写法,使用以下表达式确定元素:
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个位置

三、使用
以上是selector入门,接下来,就可以使用【打工助手-数据录入辅助工具】进行流程编排了,工具使用,可以参考以下文章