02day

<a href=‘#’> 站位
id 定义元素标签的唯一标识

内部样式表
<style type='text/css'>
    p{
        color:red;   red可以是任何颜色    键值对 K：V  每一组键值对都是一个声明
        font-size:40px   分号结束符
    }
<style>

<link rel="stylesheet" type="text/css" href="css/style.css">

<---> html的注释 css用不了

/**/  css  注释

ctrl+/   快速注释
ctrl shift+/ 多行注释
ctrl+d  复制一行

块元素 独占一行 主要做页面布局 常用块元素 div p h1~h6 ul li......... 块包含内联 a 除外 他可以包含所有的元素
a 标签可以包含任意块 它本身除外
p元素 不包含别的块 包含span 只能放内联里
内联元素 （行内元素） 常见 span a img iframe 之战自身大小的元素 span标签显示一次排序 span给选中一个标签设样式的

所有的元素都可以加 （id）

background-color 背景颜色 width

元素选择器：
    语法：标签名（）

---

id选择器 
    语法 ：#   在p前面加#号
    通关元素的id值来选择元素

---

类选择器：
.class属性值{}  在p前面加点（.）
    可以通过class的属性值来选择元素
.hello

---

选择器分组（并既选择）：
  选择器1，..........选择器n{}

---

统配选择器：
    选择页面中的所有元素 *{}

---

复合选择器(交集选择器)
    选中多个选择器

---

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

image.png