css 仅当存在后面的同级时才选择元素

wqsoz72f 于 5个月前发布在其他

关注(0)|答案(8)|浏览(106)

在我的HTML结构中，我这样设置它：

<body>
   <main>
      <section>
      ...
      </section>

      <aside>
      ...
      </aside>
   </main>
</body>

字符串
问题是，并非所有页面都有<aside>
我需要选择<section>并给予它一个max-width: 500px;仅当<aside>存在时。默认值为section { max-width: 1000px; }（当<aside>不存在时）
不像在Selector for one tag directly followed by another tag中，用户[问问题]一直想要样式“B”。而且，在这个问题中，用户想要选择“B”（而不是“A”）

我需要样式<section>只有当<aside>是存在的。
我不能改变HTML >_<的顺序
只能用CSS吗？
我需要什么选择器或如何设置它？
如果不能用CSS来完成（我宁愿只用CSS），我怎么能做到这一点？

css

来源：https://stackoverflow.com/questions/29662009/select-element-only-if-a-later-sibling-exists

8条答案

按热度按时间

bwleehnv1#

一个巧妙的小把戏

你可以使用一个技巧来检查 * <section>元素是否是<main>中唯一的元素。* 如果有任何其他元素，这将不起作用。在你的情况下，它应该像这样工作（http://jsfiddle.net/Ljm323qb/2/）：

section {
     max-width: 500px;
}
/* The STAR of the show */
section:only-child {
     max-width: 1000px;
}

字符串
如以下代码所示：http://codepen.io/omarjuvera/pen/ByXGyK?editors=110

关于兄弟选择器的一般内容

有一个+选择器，它会选择元素（https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors）后面的兄弟元素。
还有一个~选择器，它选择所有后面的兄弟（https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors）
您可以通过将<aside>元素放在<section>元素之前并使用兄弟选择器来实现它。
下面是一个例子：http://jsfiddle.net/Ljm323qb/1/

快速浏览未来

很快，这将成为可能，一个新的:has伪类（http：//dev.w3.org/csswg/selectors-4/#relational）
你可以调用类似main:has(> aside) > section { ... }的东西，但不幸的是，我们必须等待：（

赞(0）回复(0）举报 5个月前

ndasle7k2#

无JavaScript

如果你可以改变html元素的顺序：

<body>
   <main>
      <aside>
      ...
      </aside>

      <section>
      ...
      </section>
   </main>
</body>

字符串

你可以通过使用兄弟选择器这样做：

aside ~ section {
    max-width: 500px;
}

型

赞(0）回复(0）举报 5个月前

kx5bkwkv3#

您可以使用jQuery将类.haveSidebar切换到body标签，并使section标签的CSS取决于该类是否存在于body标签上：

超文本标记语言

<main>
    <section>
    </section>

    <aside>
    </aside>
</main>

字符串

CSS

main {
    width:100%;
}
main aside {
    width:300px;
    background:red;
    min-height:300px;
    float:left;
}
main section {
    width:100%;
    background:green;
    min-height:300px;
    float:left;
}
body.haveSidebar main section {
    width: calc(100% - 300px);
}

型

var sideBar = $('body > main > aside');
if (sideBar.length > 0) {
    $('body').addClass('haveSidebar');
} else {
    $('body').removeClass('haveSidebar');
}

型
Fiddle with aside tag
Fiddle without aside tag的

更新

不使用calc()的解决方案，使用margin-left属性

main aside {
    width:300px;
    background:red;
    min-height:300px;
    position:relative;
}
main section {
    width:100%;
    background:green;
    min-height:300px;
    float:left;
}
.haveSidebar main section {
    margin-left:301px;
}

型
Fiddle without calc()的

赞(0）回复(0）举报 5个月前

tct7dpnv4#

您可以使用:has()选择器来实现它，如下所示：

:has(main aside) {
  section {
    max-width: 500px;
  }
}

字符串

赞(0）回复(0）举报 5个月前

bvjveswy5#

尽管这不是最整洁的方式，你可以运行document ready JavaScript函数，检查aside标签是否存在，并相应地向section标签注入一个内嵌css。

赞(0）回复(0）举报 5个月前

zbwhf8kr6#

如果你有可能将aside元素放在第一节之前，你可以使用adjacent sibling selectors：

aside + section{ max-width: 500px }

字符串

赞(0）回复(0）举报 5个月前

5ktev3wc7#

试试这个，我相信这只能用JavaScript来完成。

if ($('main').find('aside').length>0)
{
    $('main').find('section').addClass('specificSection');
}

字符串

赞(0）回复(0）举报 5个月前

7gs2gvoe8#

用JavaScript来完成这一点是相当简单的。
例如，这将工作：

<script>
    window.onload = function() {
        if (document.getElementsByTagName('aside')[0]) {
           document.getElementsByTagName('section')[0].style.max-width = '500px';
        } else {
            document.getElementsByTagName('section')[0].style.max-width = '1000px';
        }
    }
</script>

字符串

赞(0）回复(0）举报 5个月前

我来回答

css 仅当存在后面的同级时才选择元素

8条答案

一个巧妙的小把戏

关于兄弟选择器的一般内容

无JavaScript

如果你可以改变html元素的顺序：

你可以通过使用兄弟选择器这样做：

相关问题

热门标签

最新问答