标签：web child 元素 自动化 type 选择器 CSS 属性
CSS选择器
要使用css对HTML页面中的元素进行定位或控制，这就需要用到CSS选择器，HTML页面中的元素就是通过CSS选择器进行控制的。css 选择器有自己的语法规则和表达式。
CSS支持场景
- 支持web产品
- 支持app端的webview
CSS相对定位
在使用过程中尽量避免直接copy selector绝对路径，使用相对定位更加容易维护，语法也相对更为简洁
CSS定位调试方法
- 进入浏览器的console
- 输入:
- $("css表达式")
- 或者$$("css表达式")
CSS基本语法
| 选择器 | 格式 | 示例 | 示例说明 |
|---|---|---|---|
| 选择全部 | * | * | 选择全部元素 |
| 标签选择器 | html标签 | p | 选择所有<p>元素 |
| ID选择器 | #id属性值 | #su | 选择所有id='su'的元素 |
| 类选择器 | .class属性值 | .s_btn | 选择所有class='s_btn'的元素 |
| 属性选择器1 | [属性名] | [type] | 选择所有带type属性的元素 |
| 属性选择器2 | [属性名='属性值'] | [type="submit"] | 选择所有type="submit"的元素 |
| 属性选择器3 | [属性名~='属性值'] | [type~="submit"] | 选择所有type包含"submit"的元素 |
| 属性选择器4 | [属性名|='属性值'] | [type|="submit"] | 选择所有type以"submit"开头的元素 |
CSS关系定位语法
| 选择器 | 格式 | 示例 | 示例说明 |
|---|---|---|---|
| 标签指定属性 | 标签加属性描述 | input#su | 选择所有id='su'的<input>元素 |
| 并集 | 元素1,元素2 | div,p | 选择所有<div>和<p>元素 |
| 父子 | 元素1>元素2 | div>p | 选择所有父级是<div>的<p>元素 |
| 后代 | 元素1 元素2 | div p | 选择<div>中的所有<p>元素 |
| 相邻 | 元素1+元素2 | div+p | 选择<div>同级后的相邻<p>元素 |
| 同级 | 元素1~元素2 | div~p | 选择<div>同级后的所有<p>元素 |
CSS顺序定位语法
| 选择器 | 格式 | 示例 | 示例说明 |
|---|---|---|---|
| 唯一子元素 | :only-child | p:only-child | 选择所有<p>元素且该元素是其父级的唯一一个元素 |
| 第一子元素 | :first-child | p:first-child | 选择所有<p>元素且该元素是其父级的第一个元素 |
| 最后子元素 | :last-child | p:last-child | 选择所有<p>元素且该元素是其父级的最后一个子元素 |
| 顺序选择器 | :nth-child(n) | p:nth-child(2) | 选择所有<p>元素且该元素是其父级的第二个子元素 |
| 顺序类型选择器 | :nth-of-type(n) | p:nth-of-type(2) | 选择所有<p>元素且该元素是其父级的第二个<p>元素 |
| 倒序选择器 | :nth-last-child(n) | p:nth-last-child(2) | 选择所有<p>元素且该元素是其父级的倒数第二个子元素 |
| 倒序类型选择器 | :nth-last-of-type(n) | p:nth-last-of-type(2) | 选择所有<p>元素且该元素是其父级的倒数第二个<p>元素 |
标签：web,child,元素,自动化,type,选择器,CSS,属性 来源： https://www.cnblogs.com/xxiaow/p/16307649.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。