web前端：css所有选择器、定位【粘性元素定位】全

初识css样式

基本选择器

组合选择器

属性选择器

定位

初识css样式

1. 层叠样式表

2. 作用：美化html元素效果、布局

3. 外部样式表储存在css文件中

基本选择器

1. id选择器【id】优先级第一

2. 类选择器【class】优先级第二

3. 元素选择器【标签选择器】优先级第三

4. 通用选择器【*】优先级最低

5. 分组选择器【多个选择器，中间用逗号隔开】优先级第五

组合选择器

• 注意：容器是有选择的，最好div容器内嵌套其他标签，避免其他标签嵌套div容器

1. 后代选择器【空格隔开】优先级第四

2. 子元素选择器【>隔开】优先级第六

   • 只对一级子元素有效

3. 相邻兄弟选择器【+隔开】

   • 只能选择一个
   • #div1+#div2+#div3 { }————代表div1下边div2下边的div3

4. 后续兄弟选择器【~隔开】优先级大于相邻兄弟

   • 所有相邻兄弟

属性选择器

1. [attribute]选择器

   • 写法：a[target] { color : red; }
   • 注意：a 和 [target] 之间不能有空格

   伪类、伪元素在这篇文章详细讲 http://t.csdn.cn/146YW

定位

1. position属性

   1. static静态【默认】

      • 不受上下左右属性影响
      • 根据页面正常流

   2. relative相对定位

      • 相对原正常位置做位置调整
      • 原位置依旧被霸占，不会影响页面其他内容

   3. fixed固定

      • 相对于窗口定位，即使滚动页面，它也始终位于同一位置

   4. absolute绝对

      • 相对于最近的祖先元素定位（需使用相对定位），如果没有则跟随body，页面滚动随之滚动

   5. sticky粘性元素

      • 开始时相对定位，到达指定位置时切换成固定定位
      • 当碰到跟随body的绝对定位时，粘性元素切换回相对定位

2. z-index堆栈顺序

   1. 值大的在前面显示，值可以为负数