Javascript 为什么子分区修改会更改所有其他子分区？

我有这个html结构：

  <div id="guide_rubric" class="col-md-2 anti-padding">
    <div id="rubric_1" class="col-md-12 anti-padding rubric-text rubric-focus-other"><span onclick="rubric_click(5)" class="span-rubric">Climat et météo</span></div>
    <div id="rubric_2" class="col-md-12 anti-padding rubric-text rubric-focus-other"><span onclick="rubric_click(5)" class="span-rubric">Climat et météo</span></div>
    <div id="rubric_3" class="col-md-12 anti-padding rubric-text rubric-focus-other"><span onclick="rubric_click(5)" class="span-rubric">Climat et météo</span></div>
    <div class="planificationDescription">
      <p>some text</p>
    </div>
    <button id="guideTripButton" onclick="location.href='/apps/'" class="btn">C'est parti !</button>
  </div>

气候与气象
气候与气象
气候与气象
一些文本

好极了！

但是，当我向类planificationDescription添加一些样式时，它会更改所有指南规范的样式

例如，如果我添加背景色，所有其他div都会更改

我添加如下div：

<div id="rubric_1" class="col-md-12 anti-padding rubric-text rubric-focus-other"><span onclick="rubric_click(5)" class="span-rubric">Climat et météo</span></div>

Climat et météo

动态地

网站：

---

这是左边的菜单。

这是经过测试的

<!--just to be specific and sure-->
<!--Just add another class to the div like-->
<div class="planificationDescription data_at1"><p>some text</p></div>

<!--And in css you would target that like-->
<style>
    div.planificationDescription.data_at1{
        /*style required!!!*/
    }
</style>



<!--Another alternative is to add a unique attr like below-->
<div class="planificationDescription" about="data_at1"><p>some text</p></div>
<!--And in css you would target that like-->
<style>
    div.planificationDescription[about=data_at1]{
        /*style required!!!*/
    }
</style>

一些文本

div.planificationDescription.data_at1{
/*风格要求*/
}
一些文本

div.planificationDescription[关于=数据]{
/*风格要求*/
}

这是经过测试的

<!--just to be specific and sure-->
<!--Just add another class to the div like-->
<div class="planificationDescription data_at1"><p>some text</p></div>

<!--And in css you would target that like-->
<style>
    div.planificationDescription.data_at1{
        /*style required!!!*/
    }
</style>



<!--Another alternative is to add a unique attr like below-->
<div class="planificationDescription" about="data_at1"><p>some text</p></div>
<!--And in css you would target that like-->
<style>
    div.planificationDescription[about=data_at1]{
        /*style required!!!*/
    }
</style>

一些文本

div.planificationDescription.data_at1{
/*风格要求*/
}
一些文本

div.planificationDescription[关于=数据]{
/*风格要求*/
}

如果要向class=“planificationDescription”添加背景色，请确保此类具有正确的宽度/高度css，或者如果要向class=“planificationDescription”添加背景色，可以在css的背景属性中指定宽度和高度然后确保该类具有正确的宽度/高度css，或者您可以在css的背景属性中指定宽度和高度，正如我在您的网站中看到的：

所有“rubric”id元素都有类“col-xs-12”，这给了它们float属性

id为“planificationDescription”的元素没有此类非浮动元素的类，因此它采用父元素高度的整个高度

解决方案：

1：

2：

气候与气象
气候与气象
气候与气象
一些文本

正如我在您的网站上看到的：

所有“rubric”id元素都有类“col-xs-12”，这给了它们float属性

id为“planificationDescription”的元素没有此类非浮动元素的类，因此它采用父元素高度的整个高度

解决方案：

1：

2：

气候与气象
气候与气象
气候与气象
一些文本

您需要清除其他元素的浮动。 请添加

clear：两者都有到<代码>平面化描述

类

.planificationDescription{
     clear:both;
     background-color:red;
}

---

你需要清除其他元素的漂浮物。 请添加

clear：两者都有到<代码>平面化描述

类

.planificationDescription{
     clear:both;
     background-color:red;
}

---

您需要使用堆栈片段（工具栏按钮

）在问题中添加一个，这样它就可以运行了，并演示了问题。向该类添加样式不应该有这种效果。您可以发布您尝试应用的CSS吗？您可以在问题中包含您的样式吗？该类的样式不应影响其他div。您能解释一下这个问题吗？目前还不清楚。您的网站正常工作，我看不出有什么东西会改变所有潜水的背景色。@Dekel尝试向类planificationDescription添加背景色，然后整个菜单的颜色会改变，而实际上不会。您需要使用堆栈片段（工具栏按钮

）来回答这个问题所以它是可运行的，演示了问题。向该类添加样式不应该有这种效果。您可以发布您尝试应用的CSS吗？您可以在问题中包含您的样式吗？该类的样式不应影响其他div。您能解释一下这个问题吗？目前还不清楚。您的网站正常运行，我看不出有任何东西会改变所有潜水的背景色。@Dekel尝试在类平面化描述中添加背景色，然后整个菜单的颜色会发生变化，但不应该发生变化。谢谢，第一个解决方案工作得很好，我现在更明白了。实际上我会选择

clear:left

而不是

float:left

使用

clear:left

比使元素成为浮动的oneThanks更有效，第一个解决方案工作得很好，我现在更了解了。实际上我会选择

clear:left

而不是

float:left

使用

clear:left而不是使元素成为浮动元素