前端

前端_第1张图片

第一关 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的元素)


前端_第2张图片

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{}

通配选择器 :     *{}


前端_第3张图片

你可能感兴趣的:(前端)