首页 新闻 会员 周边

css样式问题

0
[已解决问题] 解决于 2012-07-10 09:50

部分HTML如下：

<div class="father">
  <div class="son1">
  Box-1</div>
  <div class="son2">
  Box-2</div>
  <div class="son3">
  Box-3<br />Box-3<br />Box-3<br />Box-3</div>
  <div class="clear"></div>
 </div>

部分CSS如下：

.father .clear
{
margin:0;
padding:0;
border:0;
clear:both;
}

问题：

css中【.father .clear】和直接对【.clear】设置样式有和区别？

试了实际效果是不一样的。

问题补充：

补充完整代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>float属性</title>
    <style type="text/css">
        body
        {
            margin: 15px;
            font-family: Arial;
            font-size: 12px;
        }
        .father
        {
            background-color: #ffff99;
            border: 1px solid #111111;
            padding: 5px;
            

        }
        .father div
        {
            padding: 10px;
            margin: 15px;
            border: 1px dashed #111111;
            background-color: #90baff;
        }
        .father p
        {
            border: 1px dashed #111111;
            background-color: #ff90ba;
            clear:right;
        }
        .son1
        {
            /*这里设置son1的浮动方式*/
            float: left;
        }
        .son2
        {
            /*这里设置son2的浮动方式*/
            float: left;
        }
        .son3
        {
            /*这里设置son3的浮动方式*/
            float: right;
        }
         .father .clear
        {
            margin:0;
            padding:0;
            border:0;
            clear:both;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son1">
            Box-1</div>
        <div class="son2">
            Box-2</div>
        <div class="son3">
            Box-3<br />Box-3<br />Box-3<br />Box-3</div>
            <div class="clear"></div>
      
    </div>
</body>
</html>
MiroYuan的主页 MiroYuan | 初学一级 | 园豆：186
提问于：2012-07-09 17:02
< >
分享
最佳答案
0

楼上说的很到位了。

然后 .father .clear 优先级大于 .clear

就是如果有相同的属性  .father .clear 会覆盖 .clear 中的定义

奖励园豆：5
owsir | 菜鸟二级 |园豆：481 | 2012-07-09 17:12

谢谢，找到原因了，是优先级的问题。

MiroYuan | 园豆：186 (初学一级) | 2012-07-10 09:43
其他回答(2)
0

【.father .clear】这个是包含选择符，【.clear】是类选择符，前者多了一个范围

【.father .clear】只对class为father元素里面的class为.clear的元素有效，而【.clear】对所有的class为.clear的元素都有效

artwl | 园豆：16736 (专家六级) | 2012-07-09 17:05

感谢解答。刚找到原因了。

是设置了一个【.father div】的优先级大于【.clear】, 所以要用【.father .clear】去覆盖【.father div】

支持(0) 反对(0) MiroYuan | 园豆：186 (初学一级) | 2012-07-10 09:42
0

css就如一个女人穿衣服

每一个css样式都是一件衣服

中文代码 | 园豆：951 (小虾三级) | 2012-07-10 08:51
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。