公输的前端学习记录day8

一：Chrome 调试工具

 Chrome是浏览器提供的一个非常好用的调试工具，可以调试HTML结构和css样式。

（1）打开调试工具 

 按下f12或右击页面空白处选择检查。

elements元素

 （2）使用调试工具

 左是HTML，右是css

不会改变代码，需要复制修改代码。

如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误。

如果有样式，但样式前面有黄色叹号提示，则是样式属性书写错误。

       CSS第二天

一：emmet语法

 emmet使用缩写来提高html和css的编写速度。

1，快速生成HTML结构语法

1.  生成标签，直接输入标签名按tab即可
2. 想生成多个相同标签加上*就可以了，如：div*3，可以快速生成3个div
3. 如果有父子关系的标签，可以用＞比如ul＞li就可以了
4. 如果有兄弟关系用＋
5. 如果生成带有类名或id名的，直接.demo或者#two tab就可以了。
6. 如果生成的类名有顺序，添加自增符号＄，如：.demo$*5
7. 想生成的标签里默认显示几个文字，如：div｛一句话｝*5按tab

二：快速生成css样式

• 简写后按tab键。基本上只用写每个单词的第一个字母。

三：css的复合选择器

1 .复合选择器是建立在基础选择器之上，对基础选择器进行组合形成的。

优点：可以更准确更高效选择目标元素（标签）

常用的复合选择器主要包括：后代选择器，子选择器，并集选择器，伪类选择器等等。

2. 后代选择器（非常重要）

又称包含选择器，可以选出父元素里面子元素。中间用空格隔开，书写格式如：

ol li｛

｝

子元素可以隔代，只要包含在元素一内就可以选中。

元素一和元素二可以是任意的基础选择器

3. 子选择器（重要！！！）

子选择器只能选择作为某元素的最近一级子元素，简单理解就是选亲儿子元素。

书写格式，如：.nav＞a，选出nav类内的儿子标签a