e起飞young
一个前端码农的技术博客
那些不常用却又很实用的CSS
[ 2018/02/02, 1670阅, 0评 ]

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() 函数

calc() 函数用于动态计算长度值。

  • 需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);
  • 任何长度值都可以使用calc()函数进行计算;
  • calc()函数支持 "+", "-", "*", "/" 运算;
  • calc()函数使用标准的数学运算优先级规则;

有朋自远方来...评论一下呗O(∩_∩)O

  • 搜索