css3常用选择器
selector:nth-child() selector:nth-of-type() >=ie9
http://www.daqianduan.com/3737.html
<section> <p>我是第1个p标签</p> <p>我是第2个p标签</p> <!-- 希望这个变红 --> </section>
p:nth-child(2) { color: red; }
对于:nth-child
选择器,在简单白话文中,意味着选择一个元素如果:
- 这是个段落元素
- 这是父标签的第二个孩子元素
要满足1是p元素 2是父元素的第二个子元素
p:nth-of-type(2) { color: red; }
而p:nth-of-type(2)
表示父标签下的第二个p
元素
注意:区别
可使用父标签层级限制,而不是当前标签类型限制。如下示例:
dl :nth-child(2) { } //有空格 dd:nth-child(2) { }
html height:100%
html的高度就是屏幕高度
html,body{height:100%}这样,html body 高度都是屏幕的css像素高度,即使内容超过了这个高度
如果不设置,则由内容撑开body,html的高度
viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
设置后,布局视口宽度=逻辑分辨率宽度
视觉视口 window.innerWidth 随缩放变
布局视口 document.documentElement.clientWidth 缩放不变
屏幕宽度 screen.width 不会随缩放变
不设置viewport
移动端浏览器 默认布局宽度 多为980px;