css选择器在 web 领域应用非常普遍,不管是前端工程师还是 ui 自动化测试,使用 css 选择器都能精准快速定位到自己想要的元素。css 选择器的内容不是很多,稍微花一点时间就可以直接上手,在应用中就能逐渐掌握,当遇到一个表达式不是很熟练的时候,可以再回来查一下这篇文章。
先来看一下怎么使用 css 选择器。写一个简单的登录界面 HTML :
<div>
<h2>登录</h2>
<form action="/login" method="post">
<div>
<label>用户名</label>
<input name="username">
</div>
<div>
<label>密码</label>
<input name="password">
</div>
<div>
<input type="submit" value="登录">
</div>
</form>
</div>
使用 chrome 浏览器打开这个页面,按 F12 进入开发者调试工具,在工具界面按 ctrl + f 就可以输入 css 选择器表达式了。