特殊选择器讲解.doc

一、特殊选择器 1、* 用于匹配任何的标记 2、 用于指定父子节点关系 3、E + F?毗邻元素选择器，匹配所有紧随E元素之后的同级元素F 4、E ~ F 匹配所有E元素之后的同级元素F 5、名称[表达式] 5.1?E[att]?匹配所有具有att属性的E元素（[att]获取所有的定义了att的标签；E[att val]?匹配所有att属性等于“val”的E元素； 5.2?[att val] 获取所有定义了att属性并且属性值等于val的标签； 5.3?[att^ val]获取所有定义了att属性并且属性值以val开头的标签； 5.4?[att$ val]获取所有定义了att属性并且属性值以val结尾的标签； 5.5?[att* val]获取所有定义了att属性并且属性值包含val字符的标签； 5.6?[att~ val]获取所有定义了att属性并且属性值包含val单词的标签； 5.7?[att| val]获取所有定义了att属性并且属性值等于val或者以val-开头的标签。） 6、伪类/伪元素 6.1?css 伪类用于向某些选择器添加特殊的效果。css 伪元素用于将特殊的效果添加到某些选择器。? 可以明确两点，第一两者都与选择器相关，第二就是添加一些“特殊”的效果。这里特殊指的是两者描述了其他 css 无法描述的东西。 伪类种类伪元素种类区别 这里用伪类 :first-child 和伪元素 :first-letter 来进行比较。 p i:first-child color: red first second //伪类 :first-child 添加样式到第一个子元素 如果我们不使用伪类，而希望达到上述效果，可以这样做： .first-child color: red i class first-child first second 即我们给第一个子元素添加一个类，然后定义这个类的样式。那么我们接着看看为元素： :p:first-letter color: red i am stephen lee. //伪元素 :first-letter 添加样式到第一个字母 那么如果我们不使用伪元素，要达到上述效果，应该怎么做呢？ .first-letter color: red  span class first-letter i am stephen lee. 即我们给第一个字母添加一个 span，然后给 span 增加样式。 两者的区别已经出来了。那就是： 伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。 总结： 伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。 :pseudo-classes::pseudo-elements但因为兼容性的问题，所以现在大部分还是统一的单冒号，但是抛开兼容性的问题，我们在书写时应该尽可能养成好习惯，区分两者。 简单的说呢:伪元素的权重比伪类高，比如一个容器的为元素和伪类都定义了同一属性，但值不一样，那么将采用伪元素的。 从规范的角度伪元素一个页面只使用一次，而伪类可以多次使用。伪元素产生新对象，在dom中看不到，但是可以操作；伪类是dom中一个元素的不同状态； 6.1 常用的伪类 6.1.1?a:hover,a:link,a:active,a:visited,:focus,:blur /*动态伪类*/ 6.1.2?:disabled,:enabled,:checked,:read-only,:read-write /*UI状态伪类*/ 6.1.2.1?:read-only 只对状态 6.1.2.2?:read-write 非只读状态 6.1.3?css3伪类 6.1.3.1?:nth-child n 其父元素的第n个元素（如：p:nth-child 2 color:red; p元素是其父元素的第2个元素的话字体颜色就是红色） 6.1.3.2?nth-last-child n 其父元素的倒数第n个元素 6.1.3.3?:nth-of-type n ?（如：p:nth-of-type 2 color:red; p元素是其父元素的第2个p元素的话字体颜色就是红色） 6.1.3.4?:first-child 其父元素的第一个元素 6.1.3.5?:last-child?其父元素的最后一个元素 6.1.3.6?nth-last-of-type n ?（如：p:nth-last-of-type 2 color:red; p元素是其父元素的倒数2个p元