*{
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)不占位置;