混淆后代选择器和交集选择器所导致的错误

1.交集选择器

交集复合选择器是由两个选择器直接连接而成,第一个选择器必须为标记选择器,第二个选择器必须为类别选择器或者是ID选择器,两个选择器之间不能有空格,必须连续书写。

2.并集选择器

并集选择器,也可以说是集体声明。他的结果是同事选中各个基本选择器所选择的范围,任何形式的选择器(包括标记选择器/class 选择器/ID选择器等)都可以作为并集选择器的一部分。并集选择器是由多个选择器通过都好连接而成的,在声明各种css选择器时,如果某些选择器的风格是相同的,或者部分相同,就可以利用并集选择器声明风格相同的css选择器

3.后代选择器

后代选择器适用于对于特殊位置的html金星声明。例如当<p><.p>之间包含<span></span>标记时,就可以使用货代选择器进行相应的控制。后代选择器的方法是爸外层选择器卸载前面,内层标记卸载后面,之间用空格分隔2.当标记发生嵌套时,内层的标记就成为外形标记的后代。

PS:

后代元素不仅限于元素的直接后代,而且会影响到各级后代。因此在cSS2中,规范的定义者还规定了一种复合选择器,成为”子选择器“,也就是只对直接后代有影响的选择器,而对孙子以及多个层的后代没有影响。

子选择器和后代选择器的语法区别是使用大于号连接,例如 p>span

下面的一个例子是我在写一个网页的时候由于混淆所导致的错误:

我在#skin_5和.selected之间多加了个空格形成了后代选择器,然后导致他即使被赋予了selected属性,他的background-position属性值依然没变。

改为用交集选择器,去掉其中的空格则达到了想要的结果。

造成上面问题的原因是,我后代选择器用多了,忽视了他们之间的同级关系。

posted on 2016-03-12 17:21  baiyuhong  阅读(709)  评论(0编辑  收藏  举报