一、基本规则
CSS的核心特性就是能向文档中的一组元素类型应用某些规则。
二、规则结构
选择器+声明块。 h1{ color:red;background:yellow;} ,声明块由一个或多个声明组成。
三、元素选择器
文档的元素就是最基本的选择器,故叫元素选择器。
如果一个属性的值可以取多个关键字,关键字通常由空格分隔。
四、选择器分组
h1,h2,h3{CSS规则}
通配选择器 *{通配选择器}
对声明分组时,一定要在各个声明的最后使用分号。
类选择器和ID选择器 p.class{} p#id{}
多类选择器:通常把两个类选择器连接在一起,仅可以选择同时包含这些类名的元素,类名的顺序不限。 class="urgent warning"; ID选择器不允许有以空格分隔的词列表。
属类选择器
h1[class]{color:silver;} 这种格式要求必须与属性值完全匹配。
子串匹配属性选择器 ^开头 $结尾 *包含
[foo^="bar"] 选择foo属性值以“bar”开头的所有元素。
[foo$="bar"]选择foo属性值以“bar”结尾的所有元素。
[foo*="bar"]选择foo属性值包含子串“bar”的所有元素。
[att|="val"] 选择att属性值等于val或者以val开头的所有元素。
使用文档结构
理解父子关系。
后台选择器 h1 em{color:gray;}
选择子元素 p>em{ }
相邻兄弟选择器 h1+p{ }
伪类和伪元素
1》链接伪类::link; :visited
2》动态伪类: :focus 当前拥有焦点的元素 :hover 鼠标指针停留的那个元素 :active 鼠标点击的时候
选择第一个子元素 p:first-child {}
选择最后一子元素 p:last-child{}
选择第一行 p:first-line{}
所有的伪元素都必须放在出现该伪元素的选择器的最后面。
设置之前和之后的元素的样式
p:before{} p:after{}