【前端CSS样式定位】伪类选择器、伪元选择器

学习目标：

1. 定位：固定定位  相对定位  绝对定位
2. 伪类选择器 伪元素选择器

---

学习内容：

一、定位总结

固定定位	position:fixed	相对于与浏览器窗口 脱离文档流
		用途：返回顶部按钮
相对定位	position:relative	相对于元素原来的位置
绝对定位	position:absolue	相对于有定位的父元素或者祖先元素
		如果都没有就相对于 body
用途：		一个东西盖到一个东西上面（父元素用相对 子元素用绝对）
影响：		定位位置相同的情况下 文档后面的会遮盖文档前面的
z-index：层级		只有定位元素有层级 默认是0

二、伪类选择器

        1.a标签有4种伪类，建议按顺序书写

          link visited hover active

         2.a:link   链接前 

           a:visited    链接后

        3.input:focus   获取焦点

           border: 2px solid orange

           li:first-child     只能是第一个li,li是第一个子级元素

           ul li:first-of-type     第一个li类型的标签，li不用是第一个子元素

二、伪元素选择

p::before{

            content: "大家好";

            color: orange;

        }

        p::after{

            content:",欢迎大家学习";

            color:tomato;

        }

        div::first-line{

            color: tomato;

        }

        div::first-letter{

            font-size: 40px;

        }



        input::placeholder{

            color: pink;