input里面只有name属性可以用id定位么_Selenium元素定位提高篇CSS定位元素

       CSS(Casading Style Sheets)是一种用于渲染HTML或者XML文档的语言&＃xff0c;CSS利用其选择器可以将样式属性绑定到文档中的指定元素。理论上来说无论一个元素定位多复杂都能够定位到元素。

       不同的浏览器XPath引擎不同甚至没有自己的XPath引擎&＃xff0c;导致了XPath定位速度较慢&＃xff0c;所以推荐使用CSS来定位。

        很多情况下CSS无法使用时&＃xff0c;XPath非常容易就可以做到&＃xff0c;其次是因为XPath比CSS更加简单且容易上手。

下面介绍CSS的几种定位方法&＃xff1a;

1、CSS元素选择器

input 选择input元素

p 选择p元素

2、CSS ID与类选择器ID     选择器以 "#"来定义

class类    选择器以一个 "." 点号来定义

示例&＃xff1a;搜狗搜索页面元素举例

#query  表示id为query的元素

.query  表示class为query的元素

3、CSS 属性选择器

属性选择器可以根据元素的属性级属性值来选择元素。

示例: 

[title] 将title属性放到中括号里&＃xff0c;表示选择具有该属性的元素

[title&＃61;value]    title属性等于value的元素

[title~&＃61;value]  title属性包含value单词的元素&＃xff0c;注意是单词

[title|&＃61;value]    title属性以value单词开头的元素&＃xff0c;注意是单词

[title^&＃61;value]   title属性以value开头的元素

[title$&＃61;value]    title属性以value结尾的元素

[title*&＃61;value]     title属性包含value开头的元素

input[title*&＃61;value] 表示input元素下有title属性包含value的元素

input[type&＃61;&＃39;text&＃39;][name&＃61;&＃39;query&＃39;]#query input元素有type&＃61;&＃39;test&＃39;、name&＃61;&＃39;query&＃39;、id&＃61;&＃39;query&＃39;的元素

4、CSS 后代选择器

后代选择器又称为包含选择器。后代选择器可以选择作为某元素后代的元素。

注意: 后代元素不一定是儿子&＃xff0c;也有可能是孙子。

示例:  搜狗搜索页面元素

span input 选择span下的input元素

div.content span.enter-input input#stb 选择div.content下span.enter-input下的input id&＃61;stb的元素

5、CSS 子元素选择器

与后代选择器相比&＃xff0c;子元素选择器只能选择作为某元素子元素的元素。

如果不希望选择任意的后代元素&＃xff0c;而是希望缩小范围&＃xff0c;只选择某个元素的子元素&＃xff0c;就使用子元素选择器。子元素选择器只能选择儿子。

示例:  搜狗搜索页面元素div>input 只作为 div 元素子元素的 input元素div>form>span>input div下的子元素form下的子元素span下的子元素inputdiv>form[name&＃61;&＃39;sf&＃39;]>span>input#query div下的子元素form[name&＃61;&＃39;sf&＃39;]下的子元素span下的子元素input#querydiv#content form>span>input#query div#content下的子元素form下的子元素span下的子元素input#query

6、CSS 相邻兄弟选择器

相邻兄弟选择器可选择紧接在另一个元素后的元素&＃xff0c;而二者有相同父元素。
示例&＃xff1a;搜狗搜索页面元素示例input&＃43;input input后出现的input的元素div#content form>span&＃43;input div#content下的form元素下的子元素span同级相邻的第一个弟弟元素

7、CSS 伪类

CSS伪类用于向某些选择器添加特殊的效果。Selenium中元素CSS定位用的伪类只有:first-child(元素的第一个子元素)&＃xff0c;其他的可靠性非常低或者不能使用。
示例&＃xff1a;搜狗搜索页面元素示例input:first-child  所有第一个input元素 from >input:first-child 所有from子元素中的第一个input元素from span:first-child input:first-child from下的第一个span元素下的第一个input元素

8、CSS 选择器运用示例

9、CSS 选择器参考手册

参考w3school的选择器参考手册为样本&＃xff0c;
原文参考链接: https://www.w3school.com.cn/cssref/css_selectors.asp