您当前的位置:主页 > 教程合集 > Html/css > 网站利发国际Html/css

CSS学习之多类选择器

发布时间:2016-01-18编辑:余斗阅读:(0)字号:
    大学的时候学过Html+Css,自认为掌握了基础,可是在实际应用中方才发现自己只是懂皮毛,看得多了,困惑也就越多,就像本期要说的多类选择器,以前没用过这个方法,查询之后才明白。 CSS的多类选择器主要表现为两种形式:一个类名含多个定义的类、多个类名共用一个一个定义。 一个类名含多个定义的类(多类选择器 ) 比如我们定义两个类

    .red{color:#f00;}
    .left {float:left; font-size:18px;}
     
    引用的时候为

    <div class="red left">我引用了两个类</div>
     
    引用的两个类之间用空格隔开,而且这两个类不能为继承关系。 这样就实现了这个div块的样式同时被.red和.left定义。这里要注意的是:如果它们两个类中的属性有冲突的话,后设置的(例中为.left)起作用,即在CSS文件中放在后面的类的属性起作用 如果一个多类选择器包含类名列表中没有的一个类名,那么就不会匹配不存在的这个类。比如:

    <div class="red left font">我引用了两个类</div>
     
    我们没有定义.font的样式,这里就不会匹配font的样式,只匹配class属性中包含red和left的属性。 多个类名共用一个一个定义(群组选择器) 比如我们多个类共同用一种样式

      p,td,li{ line-height:20px; color:#c00; }
      #mainp,#siderspan{ color:#000; line-height:26px;
     
    当几个元素样式属性一样时,可以共同调用一个样式声明,元素之间用逗号分隔,这就是CSS选择器中的群组选择器。 这里应该很常见了,我们在平时的设计中常用的还有:

    #a,b{…………} //id叫a和一个标签是b的样式
    #a b{…………} //id叫a下面的一个标签是b的样式
    #a:b{…………} // id叫a的伪类b的样式(如a:link{background:#00CCFF} a:hover{background:#FF0000})
    #a.b{…………} // id叫a的下面的class叫b的样式
     
    举个例子加深下印象:

    <head>
    <style type="text/css">
    .b1{color:#ff0000;}
    .b2{font-style:italic;}
    .b1.b2{text-decoration:underline;}
    </style>
    </head>
    <body>
    <p class="b1">这里是红色</p>
    <p class="b2">这里是斜体</p>
    <p class="b1 b2">这里是红色、斜体、下划线</p>
    </body>
     
    .b1.b2 表示如果一个标签中同时使用了这两个类(不论顺序、不论是否还有其他类),则响应此样式规则。然而在 ie 中,第二个段落中除了有斜体还有下划线,说明它还把 .b1.b2 看作是 .b2。
关键字词CSS多类选择器
余斗余斗
  1. 转载请注明:CSS学习之多类选择器
  2. 版权声明:本站原创文章,由发表在Html/css分类下,于2016-01-18最后更新
利用Div+Css实现隐藏文字内容的几种方法
利用DIV+CSS实现元素透明的两种方法
手机扫一扫 随身带着看

利发国际

百度360搜索搜狗搜索