仅当存在较晚的同级元素时才选择元素[重复]

问题描述 投票:0回答:8

在我的 HTML 结构中,我的设置如下:

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

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

问题是,并非所有页面都有

<aside>

我需要选择

<section>
并给它一个
max-width: 500px;
仅当
<aside>
存在时
。默认为
section { max-width: 1000px; }
(当
<aside>
不存在时)

一个标签的选择器直接跟随另一个标签不同;用户[提出问题]想要一直使用“B”样式。另外,在这个问题中,用户想要选择“B”(而不是“A”)


  • 仅当
    <section>
    存在时,我才需要设置
    <aside>
    样式。
  • 我无法更改 HTML 的顺序 >_<
  • 只用CSS可以完成吗?
  • 我需要什么选择器或如何设置它?
  • 如果不能用 CSS 来完成(我宁愿只用 CSS),我该如何实现呢?
html css css-selectors
8个回答
51
投票

一个巧妙的小技巧

您可以通过使用技巧来检查 是否

<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 { ... }
之类的电话,但不幸的是,我们必须等待:(


4
投票

没有 JavaScript

如果您可以将 html 元素的顺序更改为:

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

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

您可以使用同级选择器来做到这一点:

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

3
投票

您可以使用

jQuery
将类 .haveSidebar 切换到 body 标签,并使 section 标签的
CSS
取决于该类是否存在于 body 标签上:

HTML

<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);
}

JS

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

摆弄旁白标签

没有旁白标签的拨弄

更新

没有

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;
}

不使用 calc() 进行拨弄


0
投票

尽管这不是最简洁的方法,但您可以在文档就绪的 javascript 函数上运行,以检查aside标签是否存在,并相应地将内联CSS注入到部分标签中。


0
投票

如果您可以将 side 元素放在第一部分之前,则可以使用 相邻同级选择器:

aside + section{ max-width: 500px }

0
投票

试试这个,我相信它只能用一些javascript来完成。

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

0
投票

使用 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
投票

可以使用 :has() 选择器来实现,如下:

:has(main aside) {
  section {
    max-width: 500px;
  }
}
© www.soinside.com 2019 - 2024. All rights reserved.