waterv 2020-06-06
会选择到这个页面上所有的这个标签的元素
选择所有class属性一支的标签,跨标签
? id必须保证全局唯一
? 不遵循就近原则
? 优先级: id选择器 > class选择器 > 标签选择器
/* ul 的第一个子元素 子元素为 li*/ ul li:first-child{ background:red; } /* ul 的最后一个子元素*/ ul li:last-child{ } /*选中p1 : 定位到父元素,选择当前的第一个元素 选择当前p元素的父级元素,选中父级元素的第一个,并且是当前元素才生效. * 顺序/ p:nth-child(1){ } /*选中父元素,下的p元素的第二个, 类型*/ p:nth-of-type(1){ }
属性名, 属性名 = 属性值(正则)
= 绝对等于
*= 包含这个元素
^= 以这个开头
$= 以这个结尾
/*都在a标签内 /*存在id属性的元素 a[]{} a[id]{} id = first的元素 a[id=first]{} class中有links的元素 a[class*="links"]{} 选中href中以http开头的元素 a[href^=http]{} 选中href中以xx结尾的元素 a[href&=http]{}
? 1.hover 鼠标悬停的状态
? 2.active 鼠标点击中的状态
display属性是用来设置元素的类型及隐藏的,常用的属性有: 1.none 元素隐藏且不占位置 2.block 元素以块元素显示 3.inline 元素以内联元素显示 4.inline-block 元素以内联块元素显示
解决方案
增加父级元素的高度
增加以个空的div标签,清除浮动
<div class="class"></div> .clear{ clear:both; margin:0; padding:0; }
overflow
在父级元素中增加一个 overflow:hidden
在父级添加一个伪类:after
#father:after{ content:‘‘; display:block; clear:both }
小结:
相对定位: position:relative
相对于原来的位置,进行指定的偏移,相对定位的话,他仍然在标准文档流之中
原来的位置会被保留
绝对定位:基于xxx定位,上下左右
固定定位
不会随游览器移动