1.伪元素first-letter设置首字样式
/*首字下沉示例*/ p::first-letter{float:left;font-size:3em;line-height:1;color:#f00}
2.伪元素first-line设置段落第一行样式
p::first-line{color:#f00;font-weight:bold}
3.:nth-child(odd/even)选中奇偶行
当然也可以使用:nth-child(2n-1)和:nth-child(2n)实现
4.:not排除选择器
/*除开type为password之外的input都设置红色1px的border*/ input:not([type=password]){border:1px solid #f00} /*除开设置了readonly和disabled之外的input都设置黄色2px的border*/ input:not([readonly]):not([disabled]){border:2px solid #ff0} /*除开class为test的p标签都设置加粗*/ p:not(.test){font-weight:bold}
5.placeholder样式设置
::-webkit-input-placeholder{color:#ccc;}/*WebKit browsers*/ :-moz-placeholder{color:#ccc;}/*Mozilla Firefox 4 to 18*/ ::-moz-placeholder{color:#ccc;}/*Mozilla Firefox 19+*/ :-ms-input-placeholder{color:#ccc;}/*Internet Explorer10+*/
6.::selection设置选中文本的样式
/*示例:设置选中文本背景色为红色,字体颜色为白色*/ ::selection{color:#fff;background-color:#f00;}
7.渐变(gradients)
CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。background: -webkit-linear-gradient(left, #039, #f00); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(right, #039, #f00); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(right, #039, #f00); /* Firefox 3.6 - 15 */ background: linear-gradient(to right, #039, #f00); /* 标准的语法(必须放在最后) */
8.calc() 函数
- 需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);
- 任何长度值都可以使用calc()函数进行计算;
- calc()函数支持 "+", "-", "*", "/" 运算;
- calc()函数使用标准的数学运算优先级规则;
有朋自远方来...评论一下呗O(∩_∩)O