CSS类忽略列表

-2

这将产生正确的结果：CSS类忽略列表

#container { 
    display: flex; 
} 

#red_box { 
    height: 30%; 
    width: 30%; 
    background-color: red; 
} 

    <div id ="container"> 
     <div id="red_box">a</div> 
     <div id="blu_box">b</div> 
    </div>

当我移动height属性到它自己的类，并给予元素两种风格，高度被忽略。

#container { 
    display: flex; 
} 
#box { 
    height: 30% 
} 
#red_box { 
    width: 30%; 
    background-color: red; 
} 

    <div id ="container"> 
     <div class="box red_box">a</div> 
     <div class="box blu_box">b</div> 
    </div>

来源

2017-01-08 AfterWorkGuinness

使用类正确的代码，您没有任何类选择。 – SLaks

他们是'class'而不是'id'。您正在使用'id'选择器（带'＃'前缀）而不是类选择器。 – Harry

'＃red_box'是为id而不是类。 '.red_box'是。 –

将＃号改为。因为您使用的是类，因此请使用box和red_box css选择器，＃用于id，id应该是唯一的，而多个元素可以具有相同的类。

来源

2017-01-08 03:05:45 XZ6H

您在代码中有几个问题：

#container { 
 
    display: flex; 
 
} 
 

 
.box { /* Change id selector "#" to class selector "." */ 
 
    height: 30% 
 
} 
 

 
.red_box { /* Change id selector "#" to class selector "." */ 
 
    width: 30%; 
 
    background-color: red; 
 
}

<div id="container"> <!-- Remove space between id and equal sign --> 
 
     <div class="box red_box">a</div> 
 
     <div class="box blu_box">b</div> 
 
    </div>

来源

2017-01-08 03:07:20

我会建议使用基于ID的CSS类，但最起码你需要consitent。这个问题来自你使用#box和#red_box这是为id的，但你引用它们作为类。

见下文

.container { 
    display: flex; 
} 
.box { 
    height: 30% 
} 
.red_box { 
    width: 30%; 
    background-color: red; 
} 

    <div class="container"> 
     <div class="box red_box">a</div> 
     <div class="box blu_box">b</div> 
    </div>

来源

2017-01-08 03:07:53

CSS类忽略列表

回答

相关问题