我可以仅使用 CSS 检测元素可见性吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37191966/
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 I detect element visibility using only CSS?
提问by GMchris
I checked the API for some pseudo-selector such as :visibleor :hidden, but was disappointed to find no such selector exists. Since jQuery has supported these selectors for a while now, I was hoping they'd be implemented. The idea is, that I'd like to show a certain element only when the element next to it is hidden, but I don't want to use JavaScript to do so. Any options?
我检查了一些伪选择器的 API，例如:visibleor :hidden，但很失望地发现不存在这样的选择器。由于 jQuery 已经支持这些选择器一段时间了，我希望它们能够被实现。这个想法是，我只想在某个元素旁边的元素被隐藏时才显示它，但我不想使用 JavaScript 来这样做。有什么选择吗？
回答by Oriol
No, it is not possible and can't be possible, at least in stylesheets.
不，这是不可能的，至少在样式表中是不可能的。
Otherwise, you could create an infinite loop:
否则，您可以创建一个无限循环：
element:visible {
display: none;
}
The element would be visible at first, then the selector would select it and hide it, then the selector wouldn't apply and it would become visible again, etc.
该元素首先是可见的，然后选择器会选择它并隐藏它，然后选择器不会应用并且它会再次变得可见，等等。
It would be possible to allow that pseudo-class only in JS APIs like querySelector. But as far as I know there isn't anything like that, and it wouldn't be CSS-only.
可以只在 .js 之类的 JS API 中允许该伪类querySelector。但据我所知，没有类似的东西，也不会只有 CSS。
回答by Sallaccio
It depends on what you mean by "next to it". You can select an element by visibility using attribute-selectors. Or from here:
这取决于您所说的“旁边”是什么意思。您可以使用属性选择器通过可见性选择元素。或从这里：
The CSS attribute selector matches elements based on the presence or value of a given attribute.
CSS 属性选择器根据给定属性的存在或值匹配元素。
To access an element by visibility, you can use for instance the substring matching attribute-selector star [att*=val]. Supposing the style of the div was hidden using visibility: hidden;:
要通过可见性访问元素，您可以使用例如匹配属性选择器 star 的子字符串[att*=val]。假设使用visibility: hidden;以下方法隐藏 div 的样式：
div[style*="hidden"] {
}
Now the question is how do you access the element "next to it". If the element you try to target comes directly after the hidden one (within same parent) use the + selector:
现在的问题是如何访问“旁边”的元素。如果您尝试定位的元素直接出现在隐藏元素之后（在同一父级中），请使用 + 选择器：
div[style*="hidden"] + span {
}
If it's before, you are out of luck but can look for some work around in the answers to this question: Is there a "previous sibling" CSS selector?
如果是之前，那么您就不走运了，但可以在以下问题的答案中寻找一些解决方法： 是否有“前一个兄弟”CSS 选择器？
回答by c-smile
CSS, by its nature, cannot have such a selector. At all.
CSS，就其本质而言，不能有这样的选择器。在所有。
Consider this:
考虑一下：
div:not(:hidden) {
visibility:hidden;
}
That definition above will left the div in undetermined state - nor visible nor hidden - at any given moment of time you cannot say if the div is visible or not.
上面的定义将使 div 处于不确定状态——既不可见也不隐藏——在任何给定的时间你都不能说 div 是否可见。
CSS wittingly prohibits such situations.
CSS 有意禁止这种情况。
jQuery is another story, :visibleand :hiddenis feasible there for the simple reason: jQuery uses only CSS selector's syntaxfor its queries. Queries there do not affect style of elements so you can retrieve many things there including final (computed) styles of elements.
jQuery是另一个故事，:visible并且:hidden是原因很简单，可行的有：jQuery使用仅CSS选择器的语法为其查询。那里的查询不会影响元素的样式，因此您可以在其中检索许多内容，包括元素的最终（计算）样式。
回答by mhatch
The functionality you are describing sounds like you could use pure CSS tabs.
您所描述的功能听起来像是可以使用纯 CSS 选项卡。
The below example was taken from here: https://webdesignerhut.com/create-pure-css-tabs
以下示例取自此处：https: //webdesignerhut.com/create-pure-css-tabs
.tabs {
max-width: 90%;
float: none;
list-style: none;
padding: 0;
margin: 75px auto;
border-bottom: 4px solid #ccc;
}
.tabs:after {
content: '';
display: table;
clear: both;
}
.tabs input[type=radio] {
display:none;
}
.tabs label {
display: block;
float: left;
width: 33.3333%;
color: #ccc;
font-size: 30px;
font-weight: normal;
text-decoration: none;
text-align: center;
line-height: 2;
cursor: pointer;
box-shadow: inset 0 4px #ccc;
border-bottom: 4px solid #ccc;
-webkit-transition: all 0.5s; /* Safari 3.1 to 6.0 */
transition: all 0.5s;
}
.tabs label i {
padding: 5px;
margin-right: 0;
}
.tabs label:hover {
color: #3498db;
box-shadow: inset 0 4px #3498db;
border-bottom: 4px solid #3498db;
}
.tab-content {
display: none;
width: 100%;
float: left;
padding: 15px;
box-sizing: border-box;
background-color:#ffffff;
}
.tabs [id^="tab"]:checked + label {
background: #FFF;
box-shadow: inset 0 4px #3498db;
border-bottom: 4px solid #3498db;
color: #3498db;
}
#tab1:checked ~ #tab-content1,
#tab2:checked ~ #tab-content2,
#tab3:checked ~ #tab-content3 {
display: block;
}
@media (min-width: 768px) {
.tabs i {
padding: 5px;
margin-right: 10px;
}
.tabs label span {
display: inline-block;
}
.tabs {
max-width: 750px;
margin: 50px auto;
}
}
/*Animation*/
.tab-content * {
-webkit-animation: scale 0.7s ease-in-out;
-moz-animation: scale 0.7s ease-in-out;
animation: scale 0.7s ease-in-out;
}
@keyframes scale {
0% {
transform: scale(0.9);
opacity: 0;
}
50% {
transform: scale(1.01);
opacity: 0.5;
}
100% {
transform: scale(1);
opacity: 1;
}
}<div class="tabs">
<!-- Radio button and lable for #tab-content1 -->
<input type="radio" name="tabs" id="tab1" checked >
<label for="tab1">
<i class="fa fa-html5"></i><span>Tab 1</span>
</label>
<!-- Radio button and lable for #tab-content2 -->
<input type="radio" name="tabs" id="tab2">
<label for="tab2">
<i class="fa fa-css3"></i><span>Tab 2</span>
</label>
<!-- Radio button and lable for #tab-content3 -->
<input type="radio" name="tabs" id="tab3">
<label for="tab3">
<i class="fa fa-code"></i><span>Tab 3</span>
</label>
<div id="tab-content1" class="tab-content">
<h3>Tab 1</h3>
<p>Lorem ipsum dolor sit amet, dignissim magna mauris integer, praesent id ut massa. Metus quis nam laoreet auctor, consectetuer nunc et penatibus nec, consequat torquent sit, vivamus commodo integer sit nec aliquam. Nulla in non, occaecat dui suspendisse, lacus ut consectetuer. Ipsum malesuada, at id, laoreet suspendisse quisque massa, nulla risus convallis mauris enim tellus nulla, in eget molestie eu dolor dolor urna. Molestie malesuada turpis auctor rutrum libero fusce.</p>
</div>
<div id="tab-content2" class="tab-content">
<h3>Tab 2</h3>
<p>Id neque ut mi condimentum numquam wisi, ut ultricies, tempus dui tellus vehicula nisl per, adipiscing nascetur lacus dolor fringilla. Maecenas purus scelerisque tempus bibendum donec eu, nam quisque mattis, montes consectetuer leo augue amet, magna nam. Wisi vestibulum bibendum. Posuere donec sed ornare arcu, quis donec turpis, nullam urna, sagittis urna pede amet. Lacus nascetur suscipit phasellus diam eget egestas, pulvinar lacus, amet mattis gravida, pede arcu praesent. Diam per felis nunc, interdum facilisi nunc tristique leo libero, amet est velit amet, wisi blandit in a adipiscing, sed mus libero. </p>
</div>
<div id="tab-content3" class="tab-content">
<h3>Tab 3</h3>
<p>Suspendisse lacus vel et aut id nonummy, libero velit, justo eu, odio phasellus mattis sapien ipsum. Suspendisse volutpat dui non proin egestas, vulputate mauris nunc amet sollicitudin, neque accumsan tincidunt, dolores viverra, aliquet metus. Beatae sed turpis, fusce nec condimentum eu lacus dolor. Elit molestie dapibus felis quisque iaculis, cum quisque lobortis ipsum vitae, lorem et ligula magna, viverra tempus vitae malesuada sapien, nec ullamcorper. Elit proident, turpis penatibus pede placerat mi laoreet augue, nullam nec. Pellentesque donec ut sed quam, fermentum ultrices ante bibendum sit, mollis viverra faucibus vestibulum pretium.</p>
</div>
</div>回答by Seraphendipity
You could try .element[style*="display:hidden"]or .element[class*="hide"](where hideis a class that simply sets display: hidden;). Seemed to work in my setup, but havent tried the edge cases of using it to turn itself off as the above comments point out.
你可以试试.element[style*="display:hidden"]or .element[class*="hide"]（哪里hide是一个简单设置的类display: hidden;）。似乎在我的设置中工作，但还没有尝试使用它来关闭自己的边缘情况，正如上面的评论所指出的那样。
