在这里插入图片描述


一、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)')
在这里插入图片描述


在这里插入图片描述

Logo

技术共进,成长同行——讯飞AI开发者社区

更多推荐