CSS3 常用选择器

li:not(:last-child){border-right: 1px dashed black;} 选择全部排除最后一项

li:not(:first-child) { }选择全部排除第一项

li:last-of-type{background-color: red;}  选择li中最后一项

li:nth-of-type(5){background-color: pink;} 选择li元素里面第五个值
 
//奇数偶数
p:nth-of-type(2n){background-color: red;} 隔行变色里面也可以填写even 偶数变色 n 是计数器(从 0 开始)
   
p:nth-of-type(2n+1){background-color: pink;} 隔行变色里面也可以填写odd 奇数变色 

// input元素
input[type^="text"]{   /**选择具有type属性且属性值为以text开头的字符串的input元素。**/
     background-color: red;
 }
 
也可以写成[type^="text"] 这样范围更广一些
 
input[value$="按钮"]{  /**选择具有value属性且属性值为以按钮结尾的字符串的input元素。**/
  background-color:pink;
}

input[value*="按钮"]{   /**选择具有value属性且属性值为包含按钮的字符串的input元素。**/
  background-color: green;
} 

// 伪类添加
div:before{display:block;content:"before伪类,前面插入内容";width: 70px;height: 60px;background-color:pink;}

div:after{content:"after伪类,后面插入内容";width: 60px;height: 70px;background-color: green;display:block;}
 

 

posted @ 2016-11-23 21:09  Model-Zachary  阅读(165)  评论(0编辑  收藏  举报