Question

我正在尝试编写css，根据页面上的元素自动设置列的样式。列有几种组合：

aside - article - aside

aside - article

article - aside

article

每个aside都有一个左或右的类，具体取决于它所在屏幕的哪一侧。无论布局如何，aside都将始终为恒定宽度，但article的宽度将根据布局而变化。

我想使用CSS（最好没有任何javascript）来设置article的宽度。我一直在玩CSS兄弟姐妹，但我不能让这个工作。这就是我理论上会喜欢使用代码的方法：

article{
   /* just article */
   width: some width;
   }
.left~article{
   /* aside-article */
   width: some width;
   }
.right~article{
   /* article-aside */
   width: some width; /* (this can be the same as the previous;
                         I don't know if it's easier to define
                         them together or separately) */
   }
.left~.right~article{
   /* aside-article-aside */
   width: some-width;
   }

前两个布局工作，第二个两个布局没有。问题是我总是希望设置article的样式，即使它不是DOM的那一部分中的最后一个。使用最后两个布局的选择器article~.right和.left~.article~.right分别找到正确的布局组合（即article然后aside或article之间的布局两个aside s）然后它定位到最右侧aside，我无法更改article的样式。

有没有办法在使用CSS中的兄弟选择器在DOM中的目标元素之前考虑所有兄弟姐妹？或者，任何人都可以想到任何“创造性”的方式，我可以解决这个问题而不必使用javascript？

谢谢！

Answer 1

CSS3解决方案

假设这些的包含元素只有aside或article的直接子元素，那么就有一个CSS3解决方案（IE9 +）。 For my example here，我假设width 400px aside和aside { width: 100px; } aside.left + article, article:first-child { width: 300px; } article:only-child { width: 400px; /* overrides article:first-child if it is only-child */ } aside.left:nth-last-of-type(2) + article { width: 200px; /* only engages if there are two asides */ }元素的标准宽度（虽然可能会有所不同）。

{{1}}

我可以不按顺序选择CSS兄弟姐妹吗？

1 个答案:

CSS3解决方案