Html 如果 div 不存在，你能在 CSS 中应用 CSS 规则吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8121847/
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
Can you apply CSS rules, in CSS, if a div doesn't exist?
提问by M K
Is this possible, with CSS ?
这是可能的，使用 CSS 吗？
Apply this rule if .div1 doesn't exist:
如果 .div1 不存在，则应用此规则：
.div2{
property: value;
}
like
喜欢
<div class="div1">
...
</div>
<div class="div2">
<!-- it exists, so do nothing -->
</div>
and
和
<div class="div2">
<!-- it doesn't exist, apply the css -->
</div>
回答by Frexuz
Exists, or doesn't exist? Your question confuses me :)
存在，还是不存在？你的问题让我很困惑:)
Apply style to .div2if .div1exists:
将样式应用于.div2如果.div1存在：
Option 1:.div2follows directlyafter .div1
选项1：.div2如下直接后.div1
.div1 + .div2 {
property: value;
}
Option 2:.div2follows .div1as a sibling:
选项 2：作为兄弟姐妹.div2跟随.div1：
.div1 ~ .div2 {
property: value;
}
Style .div2without .div1:
风格.div2没有.div1：
It's a bit of a hack, but you could do the reverse. Style .div2 normally, and then override the styling with the selectors above.
这有点黑客，但你可以做相反的事情。正常设置 .div2 样式，然后使用上面的选择器覆盖样式。
If .div1doesn't exist, .div2gets the normal styling.
如果.div1不存在，则.div2获取正常样式。
.div2 {
background: #fff;
}
.div1 + .div2 {
background: #f00; /* override */
}
/* or */
.div1 ~ .div2 {
background: #f00; /* override */
}
回答by Jordan Wallwork
If you know the 'unstyled' styles of the div, you could use a css sibling selector to style it one way if it follows .div1, and the 'plain' way if it doesnt - ie
如果您知道 div 的“无样式”样式，则可以使用 css 兄弟选择器以一种方式对其进行样式设置（如果它遵循 .div1），如果不遵循“普通”方式，则可以使用 - 即
.div2 {
/* styled however you want */
}
.div1 + .div2 {
/* 'plain' styling */
}
See the fiddle.Try removing div1 to see div2 as it would be styled without div1
见小提琴。尝试删除 div1 以查看 div2，因为它会在没有 div1 的情况下设置样式
回答by Saeed Neamati
NO
不
With CSS alone, the ifconditions which check the availability of an element, is not possible. You should use JavaScript, (jQuery is recommended).
仅使用 CSS，if检查元素可用性的条件是不可能的。您应该使用 JavaScript，（推荐使用 jQuery）。
Notes: With CSS you can check some conditions of an element, like checking if an element has an attribute (like input[type=text]), or checking if an element is the first element of a list (like p:first-child), etc. But you can't check anything from the element's sibling elements, or ancestors. Also you can't check the negative conditions most of the times.
注意：使用 CSS，您可以检查元素的某些条件，例如检查元素是否具有属性（例如input[type=text]），或检查元素是否是列表的第一个元素（例如p:first-child）等。但您无法检查任何内容来自元素的兄弟元素或祖先。此外，大多数情况下您无法检查否定条件。
回答by Pleun
No, this is not possible. But you can create class "div3" and in your code determine whether DIV1 exists and in that case apply the "div3" class instead of "div2"
不，这是不可能的。但是您可以创建类“div3”并在您的代码中确定 DIV1 是否存在，在这种情况下应用“div3”类而不是“div2”
回答by Alessandro Vendruscolo
Generally speaking, no, you can't do that.
一般来说，不，你不能那样做。
But you may 'hack' it using CSS selectors, I'm referring to to:
但是您可以使用 CSS 选择器“破解”它，我指的是：
+ .somethingselector~ .somethingselector
+ .something选择器~ .something选择器
I'd use the second selector, which is the "general sibling" selector.
我会使用第二个选择器，它是“一般兄弟”选择器。
Given the HTML you posted you can apply the style to the .div2class and then reset it using the .div1 ~ .div2selector.
鉴于您发布的 HTML，您可以将样式应用于.div2类，然后使用.div1 ~ .div2选择器重置它。
So something like this:
所以像这样：
.div1 {
color: red;
}
.div2 {
color: blue;
}
.div1 ~ .div2 {
color: black;
}
In this way, with the first HTML snippet the div2will be black and with the second snippet it will be blue.
这样，第一个 HTML 片段div2将是黑色，第二个片段将是蓝色。
