《CSS权威指南》笔记0.2:选择器

规则结构

每个规则包含两部分:选择器和声明块。声明块包含多条声明,一个声明则是一个键值对。

技术分享

选择器种类

元素选择器:h1,h2{}, h1{}

通配选择器: *{}

类选择器:*.类名{},*.类名1.类名2{},IE6不支持多类选择器

ID选择器:*#ID{}

属性选择器:简单属性选择(h1[class]),属性值(h1[title="test"]),子串匹配器:[foo^="bar"](开始)、[foo$="bar"](结尾)、 [foo*="bar"](包含)[foo|="bar"](等于bar或者以bar-开头)

文档结构

文档树结构,body是所有元素的祖先,html是整个文档的祖先

后代选择器,选择器中以空格隔开,从右向左读取。

选择子元素:h1 > span

相邻兄弟元素:h1 + span,h1后面的span

伪类和伪选择器

静态伪类::link,表示未访问,:visited,表示已访问

动态伪类::focus,表示当前拥有焦点的元素,:hover,表示停留的元素,:active,被激活的元素

添加顺序:a:link -> a:visited ->a:hover -> a:active

第一个子元素:p:first-child

:lang(){}类似属性的|=

设置首字母:p:first-letter

设置第一行:p:first-line

设置之前内容:p:before{content:"}}",color:silver}

设置之后内容:p:after(content:"test")

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。