前端之css学习第二天kjl

1.Emmet语法（简化结构）

快速生成HTML结构语法

1.生成标签 直接输入标签名 按tab键即可 比如 div 然后tab键 ，就可以生成<div></div>

2.如果想要生成多个相同标签 加上*就可以了比如 div*3 就可以快速生成3个div

3.如果有父子级关系的标签，可以用>比如 ul>li就可以了

4.如果有兄弟关系的标签，用 + 就可以了 比如 div+p

5.如果生成带有类名或者id名字的，直接写 .demo 或者 #twQtab 键就可以了

6.如果生成的div类名是有顺序的，可以用自增符号$

7.如果想要在生成的标签内部写内容可以用(}表示

2.格式化代码

格式化快捷键：鼠标右键选择格式化选项

shift+alt+f

一.css的复合选择器

复合选择器是由简单选择器组合

1.后代选择器

从父类中选出子类，对子类进行修改

元素1  元素2{

样式声明

}//表示选择元素1里面的所有元素2

要求：元素1和元素2中间用空格隔开

 <style>

        /* 我想要把ol里面的小li选出来改为pink */

        ol li {

            color: pink;

        }

    </style>

 ol li a{

            color: red;

        }//可以改标签里的孙子标签，一级一级写

如果选择的标签相同时，要结合简单选择器（类选择器、id选择器）

2.子选择器

选择作为莫元素最近一级子元素，必须是亲儿子

语法：元素1>元素2{

样式声明

}

 .nav>a {

            color: red;

        }

3.并集选择器

同时选择多组标签，为它们定义相同的样式（任何标签都可以）

语法：

元素1，元素2{样式声明}

 div,p{//可以多个标签，但标签之间要用英文逗号隔开

            color: pink;

        }

        /* 规范：并集选择器喜欢竖着写，最后一个标签不需要加逗号 */

4.伪类选择器

用于向某些选择器添加特殊效果

（1）链接伪类选择器

 /* 未访问的链接 a：link 把没有点击过的（访问过的）链接选出来 */

        a:link{

            color: pink;

            text-decoration: none;

        }

        /* a:visited 选择点击过的（访问过的）链接 */

        a:visited{

            color: orange;

        }

        /* a:hover 选择鼠标经过的那个链接 */

        a:hover{

            color: blue;

        }

        /* 4.a:active 选择的是我们鼠标正在按下还没有弹起鼠标的链接 */

        a:active{

            color: green;

        }

注意事项：按照LVHA的顺序声明：link，visited；hover；active

a链接有默认样式，要单独给链接a声明

（2）:focus伪类选择器

用于选取获得焦点的表单元素

    /* 把获得光标的input表单元素选取出来 */

        input:focus{//格式

            background-color: pink;

            color: red;

}