CSS：只有存在后来的同级时才选择元素 [英] CSS: Select element only if a later sibling exists
问题描述
在我的HTML结构中，我的设置如下：
< body&
< main>
< section>
...
< / section>
< aside>
...
< / aside>
< / main>
< / body>
问题是，并非所有页面都有< aside>
我需要选择< section> max-width：500px; 仅在< aside> 存在时。默认值为 section {max-width：1000px; } =http://stackoverflow.com/questions/1132366/selector-for-one-tag-directly-followed-by-another-tag>一个标记的选择器，后面紧跟另一个标记;用户[询问问题]想要样式B所有的时间。此外，在此问题中，用户希望选择B（而不是A）
- 如果
< aside>存在，我需要样式< section>
- 我无法更改HTML的顺序> _<
- 只能使用CSS吗？
- 我需要什么选择器或如何设置它？
- 如果不能用CSS（我宁愿它是CSS） / h2>
您可以使用一个技巧来检查 如果< section> 元素是< main> 中唯一的元素。 如果有任何其他元素，这将不工作。在您的情况下，它应该这样工作（ http://jsfiddle.net/Ljm323qb/2/ ） ：
节{
max-width：500px;
}
/ *节目的STAR * /
节：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/zh-CN/docs/Web/CSS/General_sibling_selectors ）
您可以通过将元素和< section> 元素之前的< aside> 元素并使用同级选择器。
这里有一个例子： http://jsfiddle.net/Ljm323qb/1/
快速查看未来
很快就可以这样做，新增一个：has 伪类（ http：// dev.w3.org/csswg/selectors-4/#relational ）
您可以调用 main：has（> aside）> section {...} ，但我们必须等待，不幸的是：（
In my HTML structure, I have it set up like this:
<body>
<main>
<section>
...
</section>
<aside>
...
</aside>
</main>
</body>
The problem is, not all pages have <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)
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")
- 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?
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 {
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
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)
And there's the ~ selector which selects all following siblings (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.
Here's an example: http://jsfiddle.net/Ljm323qb/1/
A quick look in the future
Soon this will be possible, with a new :has pseudo 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 :(
这篇关于CSS：只有存在后来的同级时才选择元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
