html - 当父 div 有多个类时定位嵌套 div

Question

我试图block在下面的示例中定位类。问题是我需要block根据父 div 是否具有alignleftor类来区别对待每一个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; ... }

PS 已经进行了很多搜索，但没有找到任何可以回答这个特定问题的东西。我对 CSS 也不是很好，所以任何帮助都将不胜感激。

score 1 · Accepted Answer

摆脱类之间的空间

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

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

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

您正在使用的这个选择器.section .alignleft .block将选择.block嵌套在元素内的元素，.alignleft该元素进一步嵌套在元素内.section

score 1 · Accepted Answer

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

改变你的 CSS：

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

score 0 · Accepted Answer

更改您的 CSS：

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

你以前在哪里做的是在里面.block找。.alignleft.section

相反，您需要.block在带有类section和alignleft/的元素内alignright。

3 回答 3