CSS选择器

作为网页制作基础，CSS 选择器很强大，用得恰当则事半功倍！本文介绍常用CSS选择器，并在下一篇中根据以往工作经验简单写一些Best practice，供前端er们参考。

---

1. 基本选择器

   通配符：* //匹配任何元素。
   标签选择器：div/p/span等 //匹配所有的div/p/span。
   class选择器：.xxx //匹配所有class属性包含xxx的元素。
   id选择器：#xxx //匹配所有id属性为xxx的元素。

2. 组合选择器

   多元素选择器： div,p //同时匹配所有div元素或p元素，中间用逗号分隔。
   后代元素选择器：div span //匹配所有div元素后代的span元素，中间用空格分隔。
   子元素选择器：div > span //匹配所有div元素的子元素span。
   毗邻元素选择器：div + p //匹配所有紧随div元素之后的同级p元素。
   同级选择器：div ~ p // 匹配任何在div元素后的同级p元素，css3新增。

3. 属性选择器

   div[data] //匹配全部具有data属性的div元素。
   div[data=”value”] //匹配所有data属性值为value的div元素。
   div[data~=”value”] //匹配所有data属性具有多个空格分隔的值,并且其中一个值等于value的div元素。
   div[data|=”value”] //匹配所有data属性具有多个连字号分隔（hyphen-separated），并且其中一个值以value开头的div元素，主要用于lang属性，比如”en”，”en-us”、”en-gb”等等。
   div[data^=”value”] //匹配所有data属性以value开头的元素， css3新增。
   div[data$=”value”] //匹配所有data属性data以value结尾的div元素，css3新增。
   div[data*=”value”] //匹配所有data属性data包含value结尾的div元素，css3新增。

4. 伪类/伪元素选择器

   div:first-child //匹配全部div元素的第一个子元素
   div:last-child //匹配全部div元素的最后一个子元素
   a:link //未被点击的超链接
   a:visited //已被点击的超链接
   div:active //鼠标按下，尚未释放的div元素
   a:hover //鼠标悬浮在上面的a元素
   input:focus //获得当前焦点的input元素
   div:lang(c) // lang属性等于c的div元素
   p:first-line //匹配p元素的第一行
   p:first-letter //屁屁p元素的第一个字母
   div:before or div:after //在div元素的前面或后面插入生成的内容。

   //以下为css3中新增伪类
   input:enabled //匹配激活的input元素。
   input:disabled //匹配禁用的input元素。
   input[type=”radio”]:checked //匹配选中的单选框radio。
   input::selection //匹配选中的input元素。
   div:nth-child(n) //匹配第n个元素，元素下标从1开始。
   div:nth-last-child(n) //匹配倒数第n个元素，元素下标从1开始。
   div:nth-of-type(n) //仅匹配第n个div元素。
   div:nth-last-of-type(n) //仅匹配倒数第n个div元素。
   :not(div) //匹配所有非div元素。
   ：target //突出显示点击过的超链接内容。

---

以上为常用的CSS选择器，大部分很好理解不难掌握，记住会用便可。

下面做几点说明：

• 其中nth-child(n) 和nth-of-type(n)容易混淆，下面进行实验说明：

图一

图二

图一与图二的对比，很清晰的解释了二者的区别：nth-child(n)会遍历dom结构中各个层级结构中的第n个元素，与元素类型无关。而nth-of-type(n)则会限制在选定的元素类型中，与类型有关。
实际项目中，使用nth-of-type(n)会相对安全一些。

• ：before 和：after
  
  图三

图三为一个用css实现的简单的类似微信中的聊天显示框。