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

文章目录
- 一、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)')


