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']")