day5
一、css选择器
1.序列选择器（css3新增的），可以在不给标记设置id或class的时候，根据同类型标记不同的排列方式来选取元素。分为同级、同类型两种，一般都不在元素的外层使用。
同级级别序列选择器，不能被其他类型的标记给隔开，隔开就无法选中。 语法： p:nth-child（1）{background-color: orange;}（选中第一个） p:nth-last-child（3）{}（选中倒数第三个）
同类型序列选择器，可以被不同类型标记给隔开 语法：p:first-of-type{background-color: gold; } p:nth-last-of-type(3){background-color: yellow; }
选中父元素中的唯一标记： p:only-child{ background-color: orange; }
2.伪类选择器，描述的是某种状态 a:link 描述的是鼠标的初始状态 a:visited 描述的是鼠标访问过后的状态 a:hover 描述的是鼠标的悬停（把鼠标放在文本上面）状态 a:active 描述的是鼠标的激活状态
访问过后，由于浏览器自身做了缓存状态的求别，刷新浏览器不会回到初始状态，可以识别你是否访问过某个网站。需要恢复的话可以清除浏览器的缓存。
selection伪类选择器，可以改变选中文本时的状态，但是只能修改文字背景和颜色，不能设置其他的样式p::selection{background-color: orange;color: #fff;}
应用
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; } nav{ width: 100%; height: 40px; background-color: black; margin-top: 100px; } nav ul{ width: 1000px; height: 100%; margin: 0 auto; } nav ul li{ list-style: none; float: left; font-size: 14px; line-height: 40px; padding: 0 25px; } nav ul li a{ text-decoration: none; color: #fff; } /* 表示鼠标划过li标记的时候，让其改变样式 */ nav ul li:hover{ background-color: greenyellow; } /* 表示鼠标划过li标记的时候，让它下的a标记改变文本颜色 */ nav ul li:hover a{ color: red; } </style> </head>
<body> <nav> <ul> <li>张涛很帅1</li> <li>张涛很帅2</li> <li>张涛很帅3</li> <li>张涛很帅4</li> <li>张涛很帅5</li> <li>张涛很帅6</li> <li>张涛很帅7</li> <li>张涛很帅8</li> </ul> </nav> </body> </html>
3.伪对象（元素）选择器，描述的不是某种状态，而是给标记添加一个元素（元素类型默认是内联）。after在某个元素之后添加内容。content表示内容，可以为空，但是不能省略
语法①：div::after{ content: "hello"; } div::after{ content: ""; width: 50px; height: 50px; background-color: orange; /* display: block; */ display: inline-block; }
语法②： first-letter 选中段落中第一个文字，但是只对第一行起作用 p::first-letter{ font-size: 20px; color: red; } first-line只对第一行的文本起作用 p::first-line{ color: red; }
4.群组选择器，一次性可以选择多个元素 body, ul, li, ol, dl, dt, dd, p, h1{ margin: 0; padding: 0; }
5.属性选择器，通过自身带来的属性来选择元素 通过属性选择元素： input[type]{ border: 1px solid orange; }
通过属性的属性值来选择元素： input[type="text"]{ width: 300px; border: 1px solid hotpink; }
通过属性的属性值的开头来选择元素： a[href^="h"]{ color: hotpink; }
通过属性的属性值的结尾来选择元素： a[href$="com"]{ color: orange; }
通过属性的属性值的任意字符来选择元素： a[href*="c"]{ color: gold; }
6.根和否定选择器，html是根标记，root是根标记 html{ background-color: orange; } root{ background-color: orange; }
否定选择器：给某个标记设置样式，除了这个标记以外的其他标记都会起作用。 input:not([type="text"]){ width: 200px; height: 30px; }
二、图片整合技术
图片整合技术也叫css小精灵，css sprite、雪碧图；网页将所有要用到的图片整合到一张图上面，通过backgroung-position属性来移动背景图从而达到想要的结果；能够减少对服务器的请求次数，从而减轻服务器的压力，也能够提高效率，做网页优化。
*{ margin: 0; padding: 0; } ul{ width: 248px; height: 22px; margin: 50px auto; } ul li{ width: 62px; height: 22px; line-height: 22px; list-style: none; font-size: 12px; float: left; text-align: center; background: url("./img/bg.gif") no-repeat; } ul li a{ text-decoration: none; color: black; } ul li:nth-child(2){ background-position-x: -62px; } ul li:nth-child(3){ background-position-x: -124px; } ul li:nth-child(4){ background-position-x: -186px; }
ul li:nth-child(1):hover{ background-position-y: -22px; } ul li:nth-child(2):hover{ background-position-y: -22px; } ul li:nth-child(3):hover{ background-position-y: -22px; } ul li:nth-child(4):hover{ background-position-y: -22px; }
ul li:hover{ background-position-y: -22px; } ul li:nth-child(1):hover, ul li:nth-child(2):hover, ul li:nth-child(3):hover, ul li:nth-child(4):hover{ background-position-y: -22px; }
三、定位属性
1.定位是一种让元素发生位置改变的技术，用来做网页布局。
position: static（静态定位） | relative（相对定位） | absolute（绝对定位） | fixed（固定定位）
2.定位使用的特性：
定位属性有层叠特性；要配合left、right、top、bottom来使用；他是一个单独的规则，每种定位的特性是不同的；设置完定位后，这个元素之前是什么类型和特点，设置完之后也是什么类型和特点（如内联不能设置高度和宽度，在设置完定位属性之后，依然不能设置高度和宽度）。
3.static静态定位特点：遵循标准流规则，网页正常的排版顺序；默认值（设置或不设置对标准流没有什么影响）
4.relative相对定位特点：不脱离文档流，但会占用空间；相对于自己之前在标准流的位置来定位；区分元素类型；用来对元素进行微调；一般配合绝对定位来使用（子绝父相）
5.absolute绝对定位特点：脱离文档流，不会占用空间；相对于祖先元素进行定位（如果父元素有定位流，那么就相对于父元素进行定位，如果没有就继续往上一级进行查找，直到找到body为止，如果还是没有就以body进行定位）；不区分元素类型。
{ margin: 0; padding: 0; } .father{ width: 500px; height: 500px; background-color: orange; margin: 50px auto; position: relative; } .son{ width: 200px; height: 200px; background-color: hotpink; position: absolute; / 元素垂直居中 + 子绝父相 + 四个方向都设置为0 + margin:auto; + 注意点 => 设置left:0; right:0; 这个时候会把容器的宽度作为子元素可以移动位置的范围 => 设置top:0; bottom:0; 这个时候会把容器的高度作为子元素可以移动位置的范围 */ left: 0; right: 0; top: 0; bottom: 0; margin: auto; }
6.z-index属性，定位层级属性，可以改变定位层级的关系。默认情况下，最后定位的元素会在最上面。 z-index:auto | number
12万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
