广州中企动力网站制作北京网站优化推广收集

文章目录
- 一、css定位场景
 - 二、css相对定位的优点
 - 三、css的调试方法
 - 1、表达式中含有字符串:表达式中的引号一定和外面字符串的引号相反
 
- 四、css基础语法
 - 1、标签定位
 - 2、class定位
 - 特别注意:当class类型的属性值包含多个分割值,$('.s_tab s_tab_1z9nv')不适用。
 - 解决方法:将空格替换为. $('.s_tab.s_tab_1z9nv')
 - 3、id定位
 - 4、属性表达式
 
- 五、css关系定位
 - 1、并集
 - 2、临近兄弟(平级、挨着)
 - 3、兄弟(平级、不挨着)
 - 4、父子关系
 - 后代(用的多)
 
- 六、css的顺序关系
 - 父子关系+顺序
 
一、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)')
 

