Question

在我的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不同;用户[提问]想要风格＆＃34; B＆＃34;每时每刻。此外，在这个问题中，用户想要选择＆＃34; B＆＃34; （不是＆＃34; A＆＃34;）

如果<section>存在，我只需要设置<aside>样式。

我无法更改HTML＆gt; _＆lt;
的顺序
只能用CSS完成吗？

我需要什么选择器或如何设置它？

如果不能用CSS完成（我宁愿只使用CSS），我该如何做到这一点？

Answer 1

一个巧妙的小技巧

如果<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 { ... }之类的东西，不幸的是我们不得不等待：（

Answer 2

没有JAVASCRIPT

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

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

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

您可以使用兄弟选择器这样做：

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

Answer 3

您可以使用 jQuery 将班级.haveSidebar切换为正文标记，并为{{1}制作 CSS } tag取决于此类是否存在于 body 标记上：

<强> HTML

section

<强> CSS

<main>
    <section>
    </section>

    <aside>
    </aside>
</main>

<强> JS

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

Fiddle with aside tag

Fiddle without aside tag

<强>更新

不使用var sideBar = $('body > main > aside'); if (sideBar.length > 0) { $('body').addClass('haveSidebar'); } else { $('body').removeClass('haveSidebar'); }的解决方案，使用calc()属性

margin-left

Fiddle without calc()

Answer 4

尽管这不是最好的做事方式，但您可以运行文档就绪的javascript函数，检查是否存在旁边标记，并相应地为section标记注入内联css。

Answer 5

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

Answer 6

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

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

Answer 7

在CSS中有相邻的兄弟选择器：http://www.w3.org/TR/CSS21/selector.html#adjacent-selectors

section + aside { ... }

所有现代浏览器都支持此功能，包括IE8 + 并且要小心：如果section和aside在文档树中共享同一个父级并且立即部分放在一边

，则选择器匹配

如果这不适合您，您可以尝试使用jQuery JavaScript：

if($('aside').length)) $('section').addClass('specificSection');

然后将所有样式添加到“.specificSeciton”类。

Answer 8

如果您可以在第一部分之前放置您的旁边元素，则可以使用adjacent sibling selectors：

aside + section{ max-width: 500px }

Answer 9

使用jQuery，您可以尝试类似：

if($('aside')) $('section').css('max-width','500px');

仅使用CSS，您可以为包含旁边的页面类型设置不同的样式，并且在某些方面仅在这些页面上包含该样式。您可以将该样式放入自己的小样式表中，并将其包含在需要的位置，这可能是一种更简洁的方式，而不是呈现页面然后使用JavaScript更改它。

CSS：仅在以后的兄弟存在时选择元素

9 个答案:

一个巧妙的小技巧

兄弟选择器上的常规内容

没有JAVASCRIPT

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

您可以使用兄弟选择器这样做：