高级属性伪类伪元素选择器标准文档流

margin : 0;

padding : 0;

}

高级选择器 :

　　　　　　交集选择器 :

/*交集选择器,第一个必须是标签选择器,第二个必须是类选择器 */

　　　　　　并集选择器:为什么要重置样式? 是为了更好页面布局

多个选择器之间使用逗号隔开,表示选中的页面中的多个标签,一些共性的元素,可以使用并集选择器;

属性选择器 :

伪类选择器 : 伪类选择器一般会用在超链接a标签中,使用a标签的伪类选择器,我们一定要遵循"爱恨准则" LoVe HAte

没有被访问的a标签的样式 a:link{color:red;}

访问过后的a标签的样式 a:visited{color:yellow;}

鼠标悬停时a标签的样式 a:hover{color:green;}

鼠标按住的时候a标签的样式 a:action{color:purple;}

伪类选择器:

　　　　p:after{

　　　　　　　　content:"."; 使用after 后面必须配合content使用.

　　　　　　　　display:block; 默认是行内标签,这个设置是变成块级标签

　　　　　　　　height:0;

　　　　　　　　visibility:hidden;　　　hidden是隐藏

　　　　　　　　clear:both;

　　　　　　　　}

具体说明伪元素选择器:

<style>
        *{
            padding:0;
            margin:0;
        }
        /*设置第一个首字母的样式*/
        p::first-letter{
            color:yellow;
            font-size:20px;
        }
        /*在...之前添加内容这个属性使用不是很频繁 了解即可  使用此伪元素选择器一定要结合content属性*/
        p:before{
            content:"张茹娜给某某生了个大胖儿子,他行某";
        }
        /*在...之后添加内容,使用很频繁,通常与布局有很大的关联(清除浮动)*/
        /*p:after{*/
            /*content:"张茹娜之后又给某某生了个闺女,不对是龙凤胎.";*/
        /*}*/
        /*1.清除浮动 2.将$变成块级元素 3.并且显示不占位置(不会影响界面布局)*/
        p:after{
            content:"$$$$$$$";
            color:red;
            /*变成块级标签*/
            /*display:block;*/
            /*清除后面的标签*/
            /*display:none;*/
            /*变成行内标签*/
            /*display:inline;*/
            /*display:inline-block;*/
            /*可见的元素隐藏 隐藏完占位置*/
            /*visibility:hidden;*/
            /*不占位置*/
            /*height:0;*/
        }
        button:hover{
            background-color:red;
        }
        button{
            background-color:green;
        }

    </style>
</head>
<body>
    <p>alex</p>
    <a href="#">lala</a>
    <div>哈哈哈啦啦啦</div>
    <button>王老吉</button>
</body>

标准文档流:

　　行内 , 块标签都是占位置

　　一旦标签浮动了,该标签就会浮动起来,不占位置;

　　(1)脱离了标准文档流;

　　(2)可以设置宽高;

　　(3)不占位置;

高级 属性 伪类 伪元素选择器 标准文档流

高级属性伪类伪元素选择器标准文档流