第一关 plate ,(plate元素)
第二关 bento ,(bento元素)
第三关 #fancy ,(id为fancy的元素)
第四关 plate apple ,(plate祖先元素下的apple后代元素)
第五关 #fancy pickle ,(id为#fancy的祖先元素下的pickle后代元素)
不第六关 .small ,(组为small的元素)
第七关 orange.small ,(组为small的orange元素)
第八关 bento>orange.small ,(bento父元素下的组为small的orange子元素)
第九关 plate,bento,div ,(plate,bento兄弟元素在div元素中)
第十关 * ,(*代表所有元素)
第十一关 plate>* ,(plate父元素的所有ziyuansu)
第十二关 plate + apple ,(兄弟元素选择器,plate元素的后一个元素)
第十三关 bento~pickle ,(兄弟元素选择器,bento元素后的多个pickle元素)
第十四关 plate>apple ,(plate父元素下的apple子元素)
第十五关 plate orange:first-child , (子元素选择器,plate元素下的第一个orange元素)
第十六关 plate :only-child,(所有plate元素下的元素)
第十七关 #fancy :last-child,pickle:last-child ,(id为fancy的元素的最后一个和pickle元素的最后一个)
第十八关 div plate:nth-child(3),(div元素中的第三个plate元素)
第十九关 div bento :nth-last-child(4) ,(div元素中倒数第四个bento元素)
第二十关 apple:first-of-type (第一个apple元素)
第二十一关 plate:nth-of-type(even) ,(所有偶数个的plate元素)
第二十二关 plate:nth-of-type(3),plate:nth-of-type(5) ,(plate元素下的第3个和第5个元素)
第二十三关 plate apple.small:only-of-type ,(plate元素下满足apple.small元素的唯一一个元素)
第二十四关 orange.small:last-of-type,apple.small:last-of-type ,(是orange.samll和apple.small元素的最后一个元素)
第二十五关 bento:empty ,(bento元素里没有包括额外元素)
第二十六关 apple:not(.small) ,(apple里没有组是.small的元素)
css 层叠样式表 多个样式用 ;(分号) 隔开,
id 去指定的位置 是唯一标识
href 指向外部css的样式表
css的注释 :/* */ (必须在style里面写) (缩进)
Sublime 快捷方式:
ctrl + shift + s 文件另存为
ctrl + s 保存
ctrl + 回车 另起一行
ctrl + shift + 回车 在上面另起一行
h2 * 数字1.... 出来多少对
ctrl + Alt + 向下箭头 多选 多行起编辑
ctrl + / 加注释
ctrl + shift + / 多行代码注释
ctrl + shift +k 删除一行
ctrl +z 撤销
nth 表示第几个 从一开始
内联框架 优先级 1000
id选择器 优先级 100
类和伪类 优先级 10
元素选择器 优先级 1
通配* 优先级 0
!import 优先级最高,尽量不用
> 表示包含 ul 里面包含 li ul>li*4
ul 是列表 , li 是包含的列表项
$代表顺序出现的1234
id 用#表示 p#p$*3
块元素 自己独占一行
常见的块元素 : div p h1~h6 ul li .....
dir 对页面进行布局的 style 可以在里面写
例 :
内联元素也叫行内元素,只占自己的大小,不会独占一行
常见的行内元素 : span a img iframe....
什么时候一行排不下就会另起一行
大多数用块元素包含内联元素,a 是超链接 都可以包含
a 超链接标签可以包含任意元素 除了它本身
元素选择器 : 标签名{} 例: h1{}
id 选择器 : 语法:#p{}
类选择器 : .p2{}
通配选择器 : *{}