javascript CSS：仅当存在较晚的兄弟时才选择元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29662009/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: Select element only if a later sibling exists
提问by Omar
In my HTML structure, I have it set up like this:
在我的 HTML 结构中，我的设置如下：
<body>
<main>
<section>
...
</section>
<aside>
...
</aside>
</main>
</body>
The problem is, not all pages have <aside>
问题是，并非所有页面都有 <aside>
I need to select <section>and give it a max-width: 500px;ONLY when <aside>is present. The default is section { max-width: 1000px; }(when <aside>is absent)
我需要选择<section>并给它一个max-width: 500px;ONLY when <aside>is present。默认为section { max-width: 1000px; }（<aside>不存在时）
Unlike in Selector for one tag directly followed by another tag; the user [asking the question] wants to style "B" ALL the time. Also, in this question, the user wants to select "B" (not "A")
与Selector 中的一个标签不同，后跟另一个标签；用户 [提出问题] 想一直使用“B”样式。另外，在这个问题中，用户想要选择“B”（而不是“A”）
- I need to style
<section>ONLY if<aside>is present. - I can't change the order of the HTML >_<
- Can it be done with CSS only?
- What selector do I need or how to set it up?
- If it can't be done with CSS (I rather it be CSS-only), how can I accomplish this?
<section>仅当<aside>存在时我才需要设计样式。- 我无法更改 HTML 的顺序 >_<
- 可以只用 CSS 来完成吗？
- 我需要什么选择器或如何设置？
- 如果它不能用 CSS 完成（我宁愿它是 CSS-only），我怎么能做到这一点？
回答by wawa
A neat little trick
一个巧妙的小技巧
You can achieve what you want by using a trick to check if the <section>element is the only element in <main>.This will not work, if there are any other elements there. In your case it should work like this (http://jsfiddle.net/Ljm323qb/2/):
您可以通过使用一个技巧来检查达到你想要什么，如果<section>元素是唯一的元素<main>。如果那里有任何其他元素，这将不起作用。在您的情况下，它应该像这样工作（http://jsfiddle.net/Ljm323qb/2/）：
section {
max-width: 500px;
}
/* The STAR of the show */
section:only-child {
max-width: 1000px;
}
As illustrated in this codepen: http://codepen.io/omarjuvera/pen/ByXGyK?editors=110
如本代码笔所示：http://codepen.io/omarjuvera/pen/ByXGyK?editors=110
General stuff on Sibling Selectors
兄弟选择器的一般内容
There's the +selector which would select a sibling that comes right after the element (https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors)
有一个+选择器可以选择紧跟在元素后面的兄弟元素（https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors）
And there's the ~selector which selects all following siblings (https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors)
还有~选择器选择所有以下兄弟姐妹（https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors）
You could achieve it by putting the <aside>element before the <section>element and using a sibling selector.
您可以通过将<aside>元素放在元素之前<section>并使用同级选择器来实现它。
Here's an example: http://jsfiddle.net/Ljm323qb/1/
这是一个例子：http: //jsfiddle.net/Ljm323qb/1/
A quick look in the future
Soon this will be possible, with a new :haspseudo class (http://dev.w3.org/csswg/selectors-4/#relational)
You'll be able to call something like main:has(> aside) > section { ... }but we'll have to wait for that, unfortunately :(
未来快速浏览
很快这将成为可能，使用新的:has伪类（http://dev.w3.org/csswg/selectors-4/#relational）
您将能够调用类似的东西，main:has(> aside) > section { ... }但我们会不得不等待，不幸的是:(
回答by deowk
WITHOUT JAVASCRIPT
没有 JAVASCRIPT
If you can change the order of your html elements to:
如果您可以将 html 元素的顺序更改为：
<body>
<main>
<aside>
...
</aside>
<section>
...
</section>
</main>
</body>
You can do it like this by using a sibling selector:
你可以通过使用兄弟选择器来做到这一点：
aside ~ section {
max-width: 500px;
}
回答by Fares M.
You can toggle a class .haveSidebarto the bodytag using jQueryand make your CSSfor the sectiontag depends whether this class exists on the bodytag or not:
您可以切换一类.haveSidebar的身体使用标签的jQuery，让你的CSS的section标签取决于是否对存在此类身体标记与否：
HTML
HTML
<main>
<section>
</section>
<aside>
</aside>
</main>
CSS
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
JS
var sideBar = $('body > main > aside');
if (sideBar.length > 0) {
$('body').addClass('haveSidebar');
} else {
$('body').removeClass('haveSidebar');
}
Update
更新
Solution without calc(), by using margin-leftproperty
解决方案没有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;
}
回答by Sam Redway
It would be fairly straightforward to accomplish this with JavaScript.
使用 JavaScript 完成此操作相当简单。
For example this will work:
例如，这将起作用：
<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>
回答by Matju
Even though it's not the neatest way of doing things, you can run on document ready javascript function, to check if aside tag exists, and inject an in-line css to the section tag accordingly.
即使这不是最简洁的做事方式，您也可以运行文档就绪的 javascript 函数，以检查是否存在 aside 标记，并相应地将内嵌 css 注入到 section 标记中。
回答by COLD TOLD
Try this, i believe it can only be done with some javascript.
试试这个，我相信它只能用一些 javascript 来完成。
if ($('main').find('aside').length>0)
{
$('main').find('section').addClass('specificSection');
}
回答by Eamonn Gormley
Using jQuery, you could try something like:
使用 jQuery，您可以尝试以下操作：
if($('aside')) $('section').css('max-width','500px');
Using CSS only, you could have a different style for the type of page that has the aside included and somehow only include that style on those pages. You could put that style into a little stylesheet of its own and include it where needed, which is probably a cleaner way of doing it than rendering the page and then changing it using JavaScript.
仅使用 CSS，您可以为包含侧边的页面类型使用不同的样式，并且以某种方式仅在这些页面上包含该样式。您可以将该样式放入它自己的一个小样式表中，并在需要的地方包含它，这可能比渲染页面然后使用 JavaScript 更改它更简洁。
回答by alexeiTruhin
In CSS there is Adjacent sibling selectors: http://www.w3.org/TR/CSS21/selector.html#adjacent-selectors
在 CSS 中有相邻的兄弟选择器：http: //www.w3.org/TR/CSS21/selector.html#adjacent-selectors
section + aside { ... }
This is supported by all modern browsers, including IE8+ And be careful: selector matches if section and aside share the same parent in the document tree and section immediatelyprecedes aside
所有现代浏览器都支持这一点，包括 IE8+ 并且要小心：选择器匹配，如果节和边在文档树中共享相同的父级并且节紧跟在边之前
If this doesn't work for you, you may try JavaScript with jQuery:
如果这对您不起作用，您可以使用 jQuery 尝试 JavaScript：
if($('aside').length)) $('section').addClass('specificSection');
And then add all your styles to class '.specificSeciton'.
然后将所有样式添加到“.specificSeciton”类。
回答by Ga?l Barbin
If you have the possibility to put your aside element before the section one, you can use the adjacent sibling selectors:
如果你有可能将你的元素放在第一部分之前，你可以使用相邻的兄弟选择器：
aside + section{ max-width: 500px }
