徘徊
CSS3键盘悬停效果和动画css3最后一个元素，可以轻松应用于按钮、LOGO、图片等元素。 所有这些效果只需要一个标签css3最后一个元素，必要时使用 before 和 after 伪元素。 由于使用CSS3过渡、转场和动画效果，仅支持Chrome、Firefox和Safari等现代浏览器。
使用
吞咽中使用
var gulp = require('gulp');
var stylus = require('gulp-stylus');
var watch = require('gulp-watch');
var nib = require('nib');
var rename = require('gulp-rename');
var autoprefixer = require('gulp-autoprefixer');
var browserslist = ['Android 2.3', 'Android >= 4', 'Chrome >= 20', 'Firefox >= 24', 'Explorer >= 8', 'iOS >= 6', 'Opera >= 12', 'Safari >= 6'];
gulp.src('./style/hover.styl')
.pipe(stylus({
compress:true,
use: nib()
}))
.pipe(rename('hover.min.css'))//重命命
.pipe(gulp.dest('./build/css/'));//压缩到的文件夹
经常使用
直接在页面中引用./build/css/hover.min.css
Pulse Grow
源码地址：
公共选择器
属性选择器
伪类选择器
CSS中常见的选择器包括转义选择器、元素选择器、类选择器等。CSS3中添加了一个常见的选择器：
E和F属于同一个父元素，但F在E之后，一般兄弟选择器会选择所有符合这种排列的F元素。
.test~p{
background: red;
width: 50px;
}
1
2
3
4
5
6
7
8 out of div
可见，选择器
.test~p{background: red;}
选择 p.test 元素之后的所有同级元素
，因为
8 出 div
和前七个
它不是同级元素，因此未选择它。
属性选择器
a[title^="test"]{
background-color: red;
}
title="test"
title="testaaa"
title="aaatest"
title="aaaaa"
可以看到前两个标签的标题都是test开头的，都是被选择器选中的。
a[title$="test"]{
background-color: red;
}
可以看到css3 选择器，第一个和第三个标签的标题都是以test结尾，并且都是被选择器选中的。
a[title*="test"]{
background-color: red;
}
可以看到前三个标签的标题都包含test，并且都被选择器选中了。
伪类选择器
:root{
background: lightgreen;
}
/*
与下列样式效果相同
html{
background: lightgreen;
}
*/
p:nth-child(3){
background-color: red;
}
1
2
3
4
n 是一个整数
选择器已选择
父元素的第三个子元素。
注意：这个子元素不一定是同一类型，如上例中，父元素的第二个子元素是，它与其他的相同
是兄弟元素。 另外，当选择器取整数时，只能取正整数。
当值为表达式时，变量只能使用n，但n从0开始依次递增，即当值为表达式时，选择器选择多个值，[n=0,1,2,3.. .]。 当估计结果大于等于0或者小于子元素总数时，不选择任何元素。
p:nth-child(2n+1){
background-color: red;
}
图片.png
表达式为2n+1，[n=0,1,2,3...]，估计结果为nth-child(1), nth-child(3)...，所以选择器选择第一个和第三个元素。
注意：使用表达式时，CSS3 提供了两个特殊值：奇数和偶数。 奇数相当于2n+1，偶数相当于2n。
p:nth-last-child(2n+1){
background-color: red;
}
从最后一个元素开始往前数，第一个、第三个、第五个元素都被选择器选中。
p:nth-of-type(2n+1){
background-color: red;
}
该选择器选择与p同类型的兄弟元素，表达式为2n+1，即选择偶数元素。 可以看到第一个、第三个、第五个p元素都被选中了。
注意：first-of-type、last-of-type和之前的last-child、first-child的区别我们这里在CSS2中没有解释的是first-of-type和last-of-type选择第一个一个或最后一个相同类型的元素，这个元素必须存在，当第一个或最后一个元素与E类型一致时才会选择first-child和last-child，否则选择器不会生效，即匹配的元素不一定存在。
:target{
border: 2px solid;
width: 100px;
background: lightgreen;
}
jump to p1
jump to p2
p1
p2
点击这两个链接，可以发现跳转对应的元素的样式发生了相应的变化
.demo{
color: lightgreen;
}
p:not(.demo){
color: red;
}
:not(.demo){
color: blue;
}
hello world
hello shiyanlou
hello
第一个负伪类选择器选择 demo 以外的类
元素，样式为黄色； 第二个负伪类选择器选择类不是 demo 的元素css3 选择器，样式为黄色
input:enabled{
background: #FFF
}
input:disabled{
background: lightgreen
}
输入框的可用和不可用状态均由选择器捕获
input[type="checkbox"]:checked{
margin: 100px;
}
