文章目录
一、css定位场景
1、支持web产品
2、支持app端的webview（原生的不支持）
二、css相对定位的优点
1、可维护性强
2、语法更加简洁
3、解决各种复杂的定位场景
三、css的调试方法
css定位的3要素：$、小括号、字符串(单引号、双引号都支持)
进入浏览器console
输入:$("css表达式")或者$$("css表达式")
1、表达式中含有字符串：表达式中的引号一定和外面字符串的引号相反
四、css基础语法
| 类型 | 表达式 |
|---|---|
| 标签 | 标签名 |
| 类 | .class属性值 |
| id | #id属性值 |
| 属性 | [属性名=’属性值‘] |
1、标签定位
支持索引
2、class定位
特别注意：当class类型的属性值包含多个分割值，$(‘.s_tab s_tab_1z9nv’)不适用。
解决方法：将空格替换为. $(‘.s_tab.s_tab_1z9nv’)
3、id定位
4、属性表达式
五、css关系定位
| 类型 | 表达式 |
|---|---|
| 并集 | 元素，元素 |
| 临近兄弟 | 元素+元素 |
| 兄弟 | 元素1~元素2 |
| 父子 | 元素>元素 |
| 后代 | 元素 元素 |
1、并集
2、临近兄弟（平级、挨着）
$('#lg+#result_logo')
3、兄弟（平级、不挨着）
$('#lg~#form')
4、父子关系
可以一直嵌套下去
局限性：不稳定
$('#head>.head_wrapper')
后代（用的多）
$('#head #lg')
可以一直嵌套下去
$('#head .s_form #lg')
六、css的顺序关系
| 类型 | 表达式 |
|---|---|
| 父子关系+顺序 | 元素 元素 |
| 父子关系+标签类型+顺序 | 元素 元素 |
父子关系+顺序
$('#wrapper>div:nth-of-type(1)')
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之家整理，本文链接：https://www.bmabk.com/index.php/post/123133.html
