使用 CSS 选择器,定位网页元素

图片

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://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Selectors

http://www.ruanyifeng.com/blog/2009/03/css_selectors.html