CSS 选择器

Created: November-22, 2018

如何编写 css 选择器？

编写 css 选择器最重要的属性是 dom 的 class 和 id。对于一个实例，如果 html dom 看起来像下面的例子：

  <form class="form-signin">
      <input type="text" id="email" class="form-control" placeholder="Email">
      <input type="password" id="password" class="form-control" placeholder="Password">
      <button class="btn btn-block" id="signin-button" type="submit">Sign in</button>
  </form>

然后，要选择电子邮件输入字段，你可以按以下方式编写 css 选择器：

使用类名 ：css 选择器中的类名以特殊字符开头。（点）。css 选择器就像这个 .form-control。

by.css('.form-control')

由于 form-control 类由两个输入元素共享，因此它引起了定位器的双重性问题。所以在这种情况下，如果 id 可用，那么你应该总是喜欢使用 id 而不是 class name。

使用 ID ：css 选择器中的 id 以特殊字符#（hash）开头。所以使用 id for email input element 的 css 选择器将如下所示：

by.css('#email')
使用多个类名 ：如果 dom 元素有多个类，那么你可以将类组合作为 css 选择器。例如，如果 dom 元素是这样的：

<input class="username-class form-control">
// css selector using multiple classes
by.css('.username-class.form-control')

使用标记名称和其他属性 ：使用标记名称和其他属性编写 css 选择器的一般表达式是 tagname[attribute-type='attribute-vallue']。所以在表达式之后，用于登录按钮的 css 定位器可以这样形成：

by.css("button[type='submit']") //or
by.css("button[id='signin-button']")