css 三 选择器小结

css 3 选择器小结
今天把css3的选择器学习了一下。现在做个整理。
1.css 3中的属性选择器
  （1）[att^=val]----如果元素用att表示的属性值属性值得开头字符为val，则改元素使用这个样式。
      例：
      

        [id^=s]{background:#0C6;       }       

  （2）[att*=val]-----如果元素用att表示的属性之属性值中包含val指定的字符的话，则该元素使用此样式
      例：
      

[id*=s]{background:#0C6;       }       

  （3）[att$=val]-----如果元素用att表示的属性之属性值的末尾包含指定字符val，则该元素使用此样式
     例：
      

  /*a标签的href超链接的地址的末尾是"/"或者是"htm"或者是"html",使用此样式*/    a[href$=\/]:after,a[href$=html]:after{     content:"想睡";        }         /*a标签的href超链接的地址的末尾是jpg,使用此样式*/     a[href$=jpg]:after{    content:"困了";         }       

2.结构性伪类选择器
  （1）first-line
    

/*对第一行设置样式*/ p:first-line{color:#000;      }     

   （2）first-letter
    

      /*对第一个字或字母或日文使用样式*/p:first-letter{color:#000;font-size:24px;}     

（3）before

/*p标签之前插入文字*/p:before{content:"插入文字 ";}     

（4）after
  

/*p标签之后插入文字*/p:after{content:"插入文字 ";}     

3.四个基本的结构选择器，root/not/empty/target

/*root结构选择器。指定整个网页的背景颜色 如果你设置body的背景色后，那么body的背景色，只会显示有数据的地方*/:root{background:#ccc;}

/*not结构选择器。排除body和* 下面的h1不使用此样式*/body *:not(h1){background-color:#0CF;}

/*empty结构选择器。当元素内容为空白时，使用样式.可以使用在表格中，用来设置摸个单元格为空时的样式*/:empty{background:#C33;}

/*target结构选择器，对页面中某个target元素（该元素的id呗当做页面中的超链接使用）指定样式。该样式，只在用户点击了页面的超链接，并且调准到target页面时起作用*/:target{background:#993;}

4.first-child / last-child / nth-child和nth-last-child选择器

/*单独指定第一个子元素*/li:first-child{background:#fff;}

/*单独指定最后一个子元素*/li:last-child{background:#fff;}

/*对指定序号的子元素使用样式,根据你传入的值不同，他还可以对所有的第奇数个子元素或第偶数个子元素使用样式*/li:nth-child(3){background:#000;color:#fff;}

/*对指定序号的子元素使用样式,根据你传入的值不同，他还可以对所有的第奇数个子元素或第偶数个子元素使用样式 基数odd,偶数even*/li:nth-last-child(2){background:#03F;color:#fff;}

在这里有个问题：nth-child选择器在计算子元素是第奇数个元素还是第偶数个元素的时候，是连同父元素中的所有子元素一起计算的。
使用它们替换：

/*使用它们替换nth-child和nth-last-child避免出现问题。这两个选择器在计算时，只针对同类型的子元素进行计算*/h2:nth-of-type(odd){background:yellow;}h2:nth-of-type(even){background:skyblue;}

5.循环使用样式。

/*这里是吧nth-child中的n替换成xn+y;x=每几个一组;y=第几组;共12个li*/li:nth-child(4n+1){background:blue;}li:nth-child(4n+2){background:#ccc;}li:nth-child(4n+3){background:#0CC;}

6.唯一选择器。only-child

 li:only-child{background:yellow;}/*html代码：*/<ul><li>唯一列表项目</li></ul><ul><li>列表项目1</li>    <li>列表项目2</li>    <li>列表项目3</li>    <li>列表项目4</li></ul>

未完待续、、、

查看更多 下一篇