css选择器高级用法

教程大全  / 只看大图  / 倒序浏览   ©

#楼主# 2020-2-15

跳转到指定楼层

马上注册,分享更多源码,享用更多功能,让你轻松玩转云大陆。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
子元素选择器
  • 利用场景
    不同于后代选择器,只选择同一父元素的直接子元素

tips
后代元素:所有具有雷同祖先的元素
子元素:所有具有雷同的parent的元素(范围小于后代元素)

  • 表示方法
    大于号
    s1与s2是父子关系
    实例:#choose > option
    表示选择id=choose下面的所有option子元素

  • 扩展:
    连续利用

[	DISCUZ_CODE_0	]

元素之间不存在越级

相邻兄弟元素选择器
  • 利用场景
    同一父元素的相邻子元素,两者挨在一起

  • 表示方法
    +
    是同级关系并且仅靠一起
    示例:#food + div
    选择第二个div元素

[	DISCUZ_CODE_1	]
非相邻兄弟元素选择器
  • 利用场景
    同一父元素的子元素,元素之间没有仅靠在一起
    ~
    是同级关系,我序紧靠一起
    示例:#food~div
[	DISCUZ_CODE_2	]

匹配到多个结果:与#many p.special元素同级的p元素

属性选择器(重要)
  • 利用场景
    选择具有某个属性(值)的元素
  • 表示方法
    *[属性=“属性值”]
    *表示任意元素标署名,如p,div,li,button等
    通常属性值没有空格或特殊字符,可以不加引号
    实例:
    [style] 具有style属性的任意元素
    p[spec=len2] 属性spec = len2 的p元素
    p[spec="len2 len3"] 属性spec=‘len2 len3’的p元素,len2 len3之间存在空格所以加引号
    p[spec
    ='len2'] 属性spec包罗len2的p元素
    p[spec^='len2'] 属性spec以len2开头的p
    p[spec$='len2'] 属性spec以len2末端的p
    p[class=special][name=p1] #属性class=special并且属性name=p1的p
[	DISCUZ_CODE_3	]
组选择器
  • 利用场景
    当一组选择器无法选择我们需要的元素,可以通过多组选择器来选择元素
    ,
    表示两组不同的css选择器
    实例:
    div,span.p
    同时选择所有div,span.p元素
  • 扩展
[	DISCUZ_CODE_4	]
[	DISCUZ_CODE_5	]

表示选择id为food的span子元素和p子元素

伪类nth-child,nth-of-type:
  • 利用场景
    根据下标选择子元素,下标从1开始
    表示方法:
    :nth-child(n) #从中选择第n个元素,且表示的元素必须位于父元素的第n位
    :nth-of-type(n) #从中选择第n个元素,对表示的元素处于第几位没有要求
    n>1
    表示一组选择器
    示例:
    p:nth-child(3)
    选择其父元素下的第三个元素,元素范例必须是p
    p:nth-of-type(3)
    选择其父元素下的第三个p范例的元素,对于p元素位置没有要求
  • 扩展
[	DISCUZ_CODE_6	]

选择#food元素下第二个元素,该元素必须是span

[	DISCUZ_CODE_7	]

选择#food元素下第二个p元素,无论位置在哪

编辑框操作

清空输入框

[	DISCUZ_CODE_8	]
单选框
214514teoih0oyja0gogts.png

单选框有什么特点?
只能单选,不管原来该元素是否选中,直接去点击该元素即可,都可以确保该单选框被选中。
操作:
只要调用click就可以

[	DISCUZ_CODE_9	]
勾选框操作

什么是勾选框


214514mvo3llv6oi6v86v5.png

勾选框有什么特点?
可以多选,点击被选中的元素则会取消选中状态,反之亦然

如何操作

通过is_selected()查看元素是否处于选中状态
调用click()进行选择

[	DISCUZ_CODE_10	]
复选框操作

有两种:


214515i1lu84lk711871vz.png

特点都是下拉框范例的元素
第一种可以通过ctrl+点击选择多个元素
第二种只能选择一个元素,且必须选择一个元素
如何操作:
将元素用select类包装一下
模仿选择(两种下拉框都通用):调用select _by_visible_text(),参数是option元素的文本值。
取消选择(仅限第一种选择框):deselect_by_visble_text()
取消所有选择(仅限第一种选择框):deselect_all()

[	DISCUZ_CODE_11	]
[	DISCUZ_CODE_12	]
分享淘帖
回复

使用道具

您的回复是对作者最大的奖励

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于作者

伪笑前

新手猿

  • 主题

    5

  • 帖子

    5

  • 关注者

    0

Archiver|手机版|小黑屋|云大陆 | 赣ICP备18008958号-4|网站地图
Powered by vrarz.com!  © 2019-2020版权所有云大陆