当父div具有多个类时，以目标嵌套div为目标

Question

我正在尝试定位以下示例中的block类。问题是，我需要根据父div是否具有block或alignleft类来区别对待每个alignright。我尝试的任何东西都没有被拿起（Mac OS X上的Chrome）。遗憾的是我无法更改标记。

<div class="section alignleft">
    <div class="block"></div>
</div>

<div class="section alignright">
    <div class="block"></div>
</div>

目前我正在使用以下不工作的CSS：

.section .alignleft .block { float: left; ... }
.section .alignright .block { float: right; ... }

但是，以下确实有效，但对我没用，因为我需要确保block位于div内，section类同样。

.alignleft .block { float: left; ... }
.alignright .block { float: right; ... }

P.S。做了不少搜索，但没有提出任何回答这个特定问题的东西。我对CSS也不太了解，所以任何帮助都会非常感激。

Answer 1

摆脱课程之间的空间

.section.alignleft .block {
   /* Styles */
}

.section.alignright .block {
   /* Styles goes here */
}

所以在这里，我选择的.block元素嵌套在第一个选择器中具有类.section.alignleft的元素下，并在第二个选择器中嵌套.section.alignright。

您使用.section .alignleft .block的此选择器将选择嵌套在.block元素内的.alignleft元素，该元素进一步嵌套在具有.section的元素内

Answer 2

目标类只需要其他人不想要的空间

更改CSS：

.section.alignleft .block 
{ 
float: left; 
...
}
.section.alignright .block 
{ 
float: right; 
... 
}

Answer 3

更改CSS：

.section.alignleft .block { float: left; ... }
.section.alignright .block { float: right; ... }

您之前在.block的{​​{1}}中寻找.alignleft。

相反，您需要在.section和.block / section类的元素中使用alignleft。