CSS学习-选择器

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/baddog_/article/details/82557284

选择器

学习目的 熟练使用 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)    否定伪类选择器