CSS学习-选择器

2018-9-7 释然 前端技术资源

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

选择器

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


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



标签: CSS学习-选择器


Powered by emlog 京ICP备12006971号-1 sitemap