css选择器在 web 领域应用非常普遍，不管是前端工程师还是 ui 自动化测试，使用 css 选择器都能精准快速定位到自己想要的元素。css 选择器的内容不是很多，稍微花一点时间就可以直接上手，在应用中就能逐渐掌握，当遇到一个表达式不是很熟练的时候，可以再回来查一下这篇文章。
先来看一下怎么使用 css 选择器。写一个简单的登录界面 HTML ：
<div class="container">
<h2 class="title">登录</h2>
<form id="loginForm" 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 选择器表达式了。
在输入框中输入 .container 这个css选择器，就能找到页面中的最外层的div标签。
你也可以通过在开发者工具的console中输入 $(.container)，同样可以找到最外层的div标签。
前端工程师还需要经常使用 css 选择器编写页面样式，比如通过 css 选择器把 h2 标签的颜色改成红色：
h2 {
color: red
}
上面的操作会把页面渲染成这样：
基本选择器
我们编写的.container 就是css 中的基本选择器，表示选择 class 属性包含 container 的元素。
1、*
示例：*#loginForm
含义：通用选择器，可以选择任意元素。示例表示选择 id 属性为 loginForm 的任意元素。
2、element
示例：form
含义：根据元素名称选择元素。示例表示选择标签名为 form 的元素。
3、#
示例：#loginForm
含义：根据元素 id 选择元素。示例表示选择 id 属性为 loginForm 的元素。
4、.
示例：.container
含义：根据元素 class 属性选择元素。示例表示选择 class 属性包含 contianer 的元素。
5、[attr=value]
示例：[name="username"]
含义：根据元素属性选择元素。示例表示选择 name 属性等于 username 的元素。
属性选择器
属性选择器就是 [prop=value] 这种语法，它不仅支持相等操作，还有其他一些额外的用法也经常使用。
1、[attr]
示例：[name]
含义：具备 name 属性的元素
2、[attr*=value]
示例：[name*="user"]
含义：name 属性包含 user 的元素
3、[attr^=value]
示例：[name^="user"]
含义：name 属性以 user 开头的元素
4、[attr$=value]
示例：[name$="sername"]
含义：name 属性以 sername 结尾的元素
5、[attr~=value]
示例：[name~="username"]
含义：name 属性为 username，或者是一个以空格作为分隔的值列表，其中至少有一个值为 username，比如 name="username beauty"
6、[attr|=value]
示例：[name|="username"]
含义：name 属性为username，或者以username-作为前缀。比如 name="username-beauty"
组合选择器
组合选择器可以组合多个元素，当使用一个元素不能达到效果时，可能会把两个甚至多个元素组合在一起进行选择。比如想选择 div 标签下的 form 标签，就需要用到组合选择器，更准确的说，是后代选择器，用 div form 表示。
除了后代选择器，组合选择器还有其他表示。
1、div > h2
子代选择器。表示 div 标签下第一级子标签 h2，中间不能有其他层级。
2、label ~ input
兄弟选择器。表示 input 在 label 标签后面，并且共享同一个父节点。
3、label + input
紧邻兄弟选择器。表示 input 紧跟在 label 标签后面，并且共享同一个父节点，而 label ~ input 可以在两个元素中间插入其他的元素。
4、label, input
合并选择器。表示同时选择 label 和 input 元素。
伪元素和伪类
如果在html 中看到类似 :first-child 或者 :hover 这样的，你就是看到了一个伪元素或者伪类。举一些经常使用的伪类选择器。
1、:first-child
该元素是父级元素下的第一个子元素。
2、:last-child
该元素是父级元素下最后一个元素。
3、:nth-child(2)
该元素是父级元素下第 2 个元素，2可以修改。
4、:nth-last-child(2)
该元素是父级元素下倒数第 2 个元素。
5、:nth-of-type(2)
该元素是祖先元素下第 2 个元素，并且祖先元素名称和该元素一致。
css 选择器和 xpath 的比较
xpath 是另一种定位网页元素的技术，我们可以写一些例子对比一下它们之间的区别。
1、通过 id 定位
css：#loginForm
xpath：//*[@id="loginForm"]
2、通过 class 定位
css：.container
xpath：//*[@class="container"]
3、通过 name 属性定位
css：[name="username"]
xpath：//*[@name="username"]
4、通过父子关系定位
css：div > h2
xpath：//div/h2
5、通过祖先关系定位
css：div form
xpath：//div//form
大体来说：
1、css 更加简洁，xpath 写法更复杂。
2、css 的检索效率更高。
3、css 支持伪元素和伪类。
4、xpath 支持函数，功能上更强大。
5、css 不支持通过文本定位。
总结
css 选择器是一种常用的定位网页的技术，在前端和自动化领域应用广泛。
-
可以在 f12，console 中编写 css 选择器表达式。
-
通用选择器有 *，element，.class，#id，[prop=value] 等。
-
属性选择器有 =, *=，$=，^=，~=，|= 等等。
-
组合选择器有 >，~，+ 等等。
-
还有伪类定位。
转载：https://blog.csdn.net/weixin_42317619/article/details/114373125