只能使用CSS检测元素可见性吗？

Question

我检查了一些伪选择器的API，如:visible或:hidden，但很失望，发现没有这样的选择器存在。由于jQuery已经支持这些选择器一段时间了，我希望它们能够实现。这个想法是，我只想在它旁边的元素隐藏时显示某个元素，但我不想使用JavaScript来这样做。任何选项？

Answer 1

不，不可能和不可能，至少在样式表中。

否则，您可以创建一个无限循环：

element:visible { 
    display: none; 
} 

元素将是可见的，然后再选择将其选中并隐藏，然后选择并不适用，它会成为可见再次等

这将是可能的，只允许这种伪类只在JS APIs如querySelector。但据我所知，没有这样的东西，它不会是CSS的。

Answer 2

CSS本质上不能有这样的选择器。完全一样。

考虑一下：

div:not(:hidden) { 
    visibility:hidden; 
} 

这个定义上面会留在未确定状态格 - 也可见隐藏也没有 - 在任何给定时刻，你不能说，如果股利是可见或不可见。

CSS明智地禁止这种情况。

jQuery是另一个故事，:visible和:hidden是原因很简单，可行的有：jQuery使用仅CSS选择器的语法其查询。查询不会影响元素的样式，因此您可以在其中检索许多元素，包括最终（计算）的元素样式。

Answer 3

您所描述的功能听起来像您可以使用纯CSS标签。

下面的例子是从这里取：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>

Answer 4

这取决于你所说的 “旁边” 什么。 您可以使用attribute-selectors通过可视性选择元素。或者从here：

CSS属性选择器根据给定属性的存在或值匹配元素。

要通过可见性访问元素，可以使用例如子字符串匹配的属性选择器明星[att*=val]。假设该div的风格隐藏使用visibility: hidden;是：

div[style*="hidden"] { 

} 

---

现在的问题是你如何访问元素“旁边”。 如果尝试目标的元素隐藏一个（同一父之内）后，来直接使用+选择：

div[style*="hidden"] + span { 

} 

如果它之前，你的运气，但可以寻找一些工作在答案周围对此问题： Is there a "previous sibling" CSS selector?