python网页元素定位_Python + Selenium（八）网页元素定位（七）CSS 选择器

，可以表示为：

#search

通过属性值定位

css 选择器中允许使用元素的任意属性来定位元素，我们在选用时尽量选择能够唯一标识的(style、script、width 等不要使用)。

通过属性来定位元素，css 选择器中属性值(如type=“submit”)引号不是必须的。但是对于有空格或其他符号的时候，需要加上引号(如class=“bg s_btn”)。

比如 ，可以使用以下属性值：

[value="百度一下"]

[type="submit"]

[class="bg s_btn"]

注意第三个 class 属性的用法，这里 class 作为一个普通属性来用，一定要写完整。

上面三种都可以直接使用，我们可以在开发者工具中进行验证，验证方式也有两种：

在开发者工具的 Elements 中按Ctrl + F，在搜索框中输入 css 选择器语句：

在开发者工具的 Console 中使用 document.querySelectorAll()

通过层级定位

在 css 选择器语法中，层级不用像 Xpath 中必须要用标签名来表示层级，而可以使用任意定位方式。比如 标签名、属性、class、id 都可以用来表示每个层级。

以下面的 HTML 代码片段为例(百度的代码稍微改了一下)：

span>

span>

span>

a>

div>

结构如下：

比如从 div 找到 a， 可以有下面这几种写法：

div>a

#search>a /*id为search的子元素a*/

.s_ipt_wr>#delete /*class为s_ipt_wr的id为delete的子元素*/

.s_ipt_wr .quickdelete /*class为s_ipt_wr内部的class为quickdelete的元素*/

#search [title="清空"] /*id为serach内部title为"清空"的元素*/

可以看出上面几种写法虽然各种各样，但是其实都是指的 div 和其子元素 a。

关于 :nth-child 和 :nth-of-type 的说明：

这两个伪类都是用子元素下标来定位的。:nth-child 指定子元素的第几个，而不关注类型，一旦写了类型，类型会变成一种约束。

比如找 div 下的 a 元素：

div>a:nth-child(1)/*找不到任何元素，因为div的第一个子元素不是a*/

div>span:nth-child(1)/*找到第一个span元素，因为div的第一个子元素就是span*/

div>:nth-child(1)/*找到第一个span元素，因为div的第一个子元素是span*/

:nth-of-type 是指定元素类型，再进行查找。

div>a:nth-of-type(1) /*找到a元素，因为div的有为a的子元素*/

如果你嫌定位太麻烦，你也可以选择拷贝，虽然拷贝出来的 css 语句很乱?：