CSS3基础知识——选择器

参考网址：https://www.cnblogs.com/SPHmomo/p/6913663.html

                 http://lib.csdn.net/article/css3/56228

                 https://blog.csdn.net/u010297791/article/details/53968089

一、属性选择器

1、E[attr] 表示存在attr属性,但没有确定任何属性值；

 

2、E[attr=val] 表示属性值完全等于val；

 

3、E[attr*=val] 表示的属性值里包含val字符并且在“任意”位置；

 

4、E[attr^=val] 表示的属性值里包含val字符并且在“开始”位置；

 

5、E[attr$=val] 表示的属性值里包含val字符并且在“结束”位置，效果与E[attr^=val]相反；

二、伪类选择器

1、结构伪类

E:first-child第一个子元素：向上找到E的父元素，父元素的第一个子元素若为E，则实现选择效果，如果第一个不为E，则没有筛选到任何元素。

E:last-child最后一个子元素

E:nth-child(n) 第n个子元素，nth-child选择器在计算子元素是第n个元素，是连同所有父元素中所有子元素一起计算的，确定位置是要包含所有元素；

E:nth-last-child(n) 同E:nth-child(n) 相似，只是倒着计算；

n遵循线性变化，其取值0、1、2、3、4、... 但是当n<=0时，选取无效。

n可是多种形式：nth-child(2n+0)、nth-child(2n+1)、nth-child(-1n+3)等；

注意：在原来的基础上添加了一个元素，原来的结构伪类会因为筛选不到元素造成样式失效或者样式混乱，例如：

   

为了避免上述情况，可以用E:nth-of-type(n)

E:nth-of-type(n): 和E:nth-child(n)非常类似，不同的是它只计算父元素中指定的E类型的子元素，上面的例子就可以直接利用这个选择器实现，它可以只选中p元素。 

E:empty 选中没有任何子节点的E元素；

2、目标伪类

E:target 结合锚点进行使用，URL后面跟锚点#，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)，:target选择器用于选取当前活动的目标元素；

 

/*给没有.special 的li元素设置样式.*/

li:not(.special){

       background-color:red;

}

三、伪元素选择器

E::first-letter文本的第一个单词或字（如中文、日文、韩文等），常见的效果为首字母下沉；

E::first-line 文本第一行，不管浏览器放大缩小，始终是第一行；

E::selection 可改变选中文本的样式；

重点：E::before、E::after默认是一个行内元素，需要转换成块元素

E:after、E:before 在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。

":" 与 "::" 区别在于区分伪类和伪元素

注意： after、before与content 一起使用！！！

Selection：selection 为选中的字体设置样式，但是不支持 font-size

四、 对象文字占位

::placeholder 伪元素用于控制表单输入框占位符的外观，它允许开发者/设计师改变文字占位符的样式，默认的文字占位符为浅灰色。当表单背景色为类似的颜色时它可能效果并不是很明显，那么就可以使用这个伪元素来改变文字占位符的颜色。

需要注意的是，除了Firefox是::[prefix]placeholder，其他浏览器都是使用::[prefix]input-placeholder

Firefox支持该伪元素使用text-overflow属性来处理溢出问题。