点此获取更多相关资料
一、CSS选择器概念
二、CSS相对定位使用场景
三、CSS语法实战
3.1、CSS相对定位的优点
$("#ember63 > td.main-link.clearfix.topic-list-data > span > span > a")
$("#ember63 [title='新话题']")
3.2、CSS定位的调试方法
3.3、CSS基础语法

类型 | 表达式 | 示例 |
---|
标签 | 标签名 | $(“div”) |
类属性 | .class属性值 | $(“.dialog-container”) |
id属性 | #属性值 | $(“#dialog-holder”) |
普通属性 | [属性名=“属性值”] | $(‘aria-hidden=“true”’) |
3.4、CSS关系定位

类型 | 格式 | 示例 |
---|
并集 | 元素1,元素2 | $(‘[data-topic-id=“7306”],#ember212’) |
兄弟 | 元素1~元素2 | $(‘.link-top-line~[href=“/t/topic/7306”]’) |
邻近兄弟 | 元素1+元素2 | $(‘.link-bottom-line+[href=“/t/topic/7306”]’) |
父子 | 元素1>元素2 | $(‘#ember211>.topic-list-header’) |
后代 | 元素2 元素2 | $(‘#ember211 [data-topic-id=“7306”]’) |
3.5、CSS顺序关系

类型 | 格式 | 示例 |
---|
父子关系+顺序 | 元素 元素 | $(‘.topic-list-body>:nth-child(2)’) |
父子关系+标签类型+顺序 | 元素 元素 | $(‘.topic-list-body>tr:nth-of-type(2)’) |
- nth-child(n) : 匹配父元素中的第 n 个子元素,元素类型没有限制。
- nth-of-type(n) : 匹配同类型中的第n个同级兄弟元素。