CSSmiddot选择器14

导

读

前面介绍了几种简单的选择器，如果将这些选择器混合，会有什么效果呢？

选择器示例示例说明CSS.class.intro选择所有class="intro"的元素1#id#firstname选择所有id="firstname"的元素1**选择所有元素2elementp选择所有p元素1element,elementdiv,p选择所有div元素和p元素1elementelementdivp选择div元素内的所有p元素1elementelementdivp选择所有父级是div元素的p元素2element+elementdiv+p选择所有紧接着div元素之后的p元素2

除了简单的选择器外，复合选择器的使用方法，也是非常重要的

正

文

交集选择器

交集选择器又称为标签指定式选择器，由两个选择器构成，其中第一个为标记选择器，第二个为class选择器或者id选择器，两个选择器之间不能有空格

name.classname#idname

这种表示方式是与简单选择器一脉相承的

headmetacharset="UTF-8"title复合选择器/titlestyletype="text/css"div.label1{font-size:20px;color:red;}#label3.label2{color:blue;}div#label2{color:yellow;}/style/headbodydivid="label1"class="label1"复合选择器/divdivid="label2"class="label1"复合选择器/divdivid="label3"class="label2"复合选择器/div/body

显示效果如图所示

你能分析清楚，他们的变化过程吗？

首先，div.label1选择的是前面两个div，分别设置字体大小和颜色，#label3.label2选择第三个div，选择第二个div设置颜色，与前面的发生冲突，这就考虑到优先级问题。那么复合选择器的优先级，可以参考简单选择器的优先级。同时，还要

转载请注明：http://www.sonphie.com/lcbx/14381.html