css3新增选择器
结构伪类选择器:
first-child父元素的首个子元素指定的选择器
last-child父元素最后一个子元素
nth-child父元素的第N个子元素 不论元素类型
nth-child(4) 选择第4个孩子 n代表的是第几个的意思
nth-last-child 选择器匹配属于其元素的第N个子元素的每个元素
目标伪类选择器:
target :目标伪类选择器,选择器可用于选取当前活动的目标元素
属性选择器
选取标签带有某些特殊属性的选择器
```css /* 获取到 拥有 该属性的元素 */ div[class^=font] { /* class^=font 表示 font 开始位置就行了 */ color: pink; } div[class$=footer] { /* class$=footer 表示 footer 结束位置就行了 */ color: skyblue; } div[class*=tao] { /* class*=tao *= 表示tao 在任意位置都可以 */ color: green; } ``` ```html <div class="font12">属性选择器</div> <div class="font12">属性选择器</div> <div class="font24">属性选择器</div> <div class="font24">属性选择器</div> <div class="font24">属性选择器</div> <div class="24font">属性选择器123</div> <div class="sub-footer">属性选择器footer</div> <div class="jd-footer">属性选择器footer</div> <div class="news-tao-nav">属性选择器</div> <div class="news-tao-header">属性选择器</div> <div class="tao-header">属性选择器</div>
伪元素选择器
first-letter 文本的第一个单词或字
first-line 文本第一行
selection 可改变选中文本的样式
E:before和E:after
E元素内部的开始位置和结束位创建一个元素 该元素为行内元素 且必须要结合content属性使用
注意:
伪元素before和after 添加的内容默认是inline元素** 这两个伪元素的“content”属性表示伪元素的内容 设置,before和after 时必须设置content属性 否则不起作用
背景缩放:
通过background-size设置背景图片的尺寸
css盒模型
box-sizing 为content-box 或 border-box
content-box 盒子大小为 width+padding+border content-box:此值为其默认的W3c标准
border-box:盒子大小为width padding和border会包含到width里面的
过渡
transition 是css3中具有颠覆性的特征之一 我们可以不再flash动画后js情况下。当元素从一种样式变换到另一种演示时为元素添加效果
| 属性 | 描述 | CSS | | -------------------------- | ----------------------- | ---- | | transition | 简写属性,用于在一个属性中设置四个过渡属性。 | 3 | | transition-property | 规定应用过渡的 CSS 属性的名称。 | 3 | | transition-duration | 定义过渡效果花费的时间。默认是 0。 | 3 | | transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。 | 3 | | transition-delay | 规定过渡效果何时开始。默认是 0。 | 3 |
backface-visibility 属性定义当元素不面向屏幕时是否出现