CSS学习-选择器

选择器

学习目的 熟练使用 css 选择器

css1 中的选择器

E #myid         id选择器
E .warning      类选择器
E F             包含选择器
E:link          定义超链接未被访问
E:visited       定义超链接已经被访问
E:actice        匹配被激活的元素
E:hover     鼠标经过的元素
E:focus     获取焦点
E::first-line   元素第一行
E::first-letter 元素第一个字符

css2

*               通配选择文档中所有元素
E[foo]          包含foo属性的元素
E[foo="bar"]    包含属性foo值为bar的元素

CSS3 中的选择器可替代 了解即可
E[foo~="bar"]  含有属性foo值包括bar的元素例如 <a foo="bar bar1 bar2">link</a> 
E[foo|="en"]    属性值是一个“-”分割的 比如 en-us

E:first-child   父元素的第一个子元素
E:lang(fr)      匹配属性,元素显示内容为语言为 fr
E::before       在元素前面插入内容
E::after        在元素后面插入内容
E>F             子包含
E+E             相邻兄弟选择器 后面的兄弟

css3

E[foo^="bar"]   属性foo的值开头是bar
E[foo$="bar"]  属性foo的值得结尾是bar
E[foo*="bar"]   属性foo的值包含bar <a foo="abc_bar_as">link</a>

结构类选择器

E:root          属性文档所在的根元素
E:nth-child(n)  E元素第n个位置的子元素 n可以是 (1,2,3) 关键字(odd,even) 公式(2n,2n+3) 起始值为1
E:nth-last-child(n) 与上面的使用方法一样 倒数的第N个位置的子元素
E:nth-of-type(n)    匹配父元素中与E相同的元素中的第n个元素 
E:nth-last-of-type(n)   匹配父元素中与E相同的倒数第n个元素
E:last-child    选择位于其父元素的最后一个位置,且匹配E的子元素
E:first-of-type 选择在其父元素中匹配E的第一个同类型的子元素
E:last-of-type  选择在其父元素中匹配E的最后一个同类型的子元素
E:only-child    选择其父元素只包含一个子元素,且该子元素匹配E
E:only-of-type  选择其父元素只包含一个同类型的子元素,且该子元素匹配E
E:empty         选择匹配E的元素,且该元素不包含子节点,文本也是节点

E~F 通用兄弟选择器
E:not(s)    否定伪类选择器
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值